How to Position Tooltip in button using Bootstrap ?

Last Updated : 18 Aug, 2021

In Bootstrap 4, you can position the tooltip in various directions (left, right, top, bottom). The positioning of the tooltip is set by using the third-party library (Popper.js) before bootstrap.js in order for the tooltip to work.

Approach: The required markup for positing tooltip is on data-placement where you can set the tooltip to

Bottom
Right
Top
Left

CDN links: Include the following files in the head section of your HTML code.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.0.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"> </script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

The button is given a unique ID which is referred to in the jQuery code for initiating the tooltip. This jQuery code only initiates tooltip to display on hover as follow:

Syntax:

$(function () {
    $('[data-toggle="tooltip"]').tooltip()
})

Example 1: The following code demonstrates the above tooltip positioning using the data-placement attribute. The tooltip is associated with a button element. As you hover over the button, the tooltip displays in the default bottom position.

Tooltip Position Bottom

<div class="text-center">
  <button
    type="button"
    class="btn btn-secondary"
    data-toggle="tooltip"
    data-placement="bottom"
    title="Tooltip on bottom"
  />
</div>

Tooltip Position Top

<div class="text-center">
  <button
    type="button"
    class="btn btn-secondary"
    data-toggle="tooltip"
    data-placement="top"
    title="Tooltip on top"
  />
</div>

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <link
      rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
    <script src=
"https://code.jquery.com/jquery-3.6.0.slim.js">
    </script>
    <script
      src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>
    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
  </head>

  <body>
    <h2 style="color: green">GeeksforGeeks</h2>
    <p><b>Tooltip tutorial</b></p>
    <button
      type="button"
      class="btn btn-secondary"
      data-toggle="tooltip"
      data-placement="top"
      title="This is top tooltip">
      Hover over me to see top tooltip
    </button>
    <br /><br />
    <button
      type="button"
      class="btn btn-secondary"
      data-toggle="tooltip"
      data-placement="bottom"
      title="This is bottom Tooltip">
      Hover over me to see bottom tooltip
    </button>
  </body>
</html>

Output:

Example: The following code demonstrates tooltip positioning at the right and left of the button.

Tooltip Position Left:

<div class="text-center">
  <button
    type="button"
    class="btn btn-secondary"
    data-toggle="tooltip"
    data-placement="left"
    title="Tooltip on left"
  />
</div>

Tooltip Position Right:

<div class="text-center">
  <button
    type="button"
    class="btn btn-secondary"
    data-toggle="tooltip"
    data-placement="right"
    title="Tooltip on right"
  />
</div>

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <link
      rel="stylesheet"
      href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
    <script src=
"https://code.jquery.com/jquery-3.6.0.slim.js">
    </script>
    <script
      src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
      crossorigin="anonymous">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
    </script>

    <script>
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    </script>
    <style>
      .btn {
        margin: 10px;
      }
    </style>
  </head>

  <body>
    <h2 style="color: green">GeeksforGeeks</h2>
    <p><b>Tooltip tutorial</b></p>

    <button
      type="button"
      class="btn btn-secondary"
      data-toggle="tooltip"
      data-placement="right"
      x-placement="left"
      title="This is left Tooltip">
        Hover over me to see Right tooltip
    </button>

    <button
      type="button"
      class="btn btn-secondary"
      data-toggle="tooltip"
      data-placement="left"
      x-placement="right"
      title="This is right Tooltip">
       Hover over me to see Left tooltip
    </button>
  </body>
</html>

Output:

You can learn all the other things about tooltip by following Bootstrap 4 Tooltip article.