How to Position Tooltip in button using Bootstrap ?

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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.min.js”> </script><script src=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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 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>
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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.min.js">    </script>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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 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>

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/bootstrap@4.6.0/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/bootstrap@4.6.0/dist/js/bootstrap.min.js">    </script>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/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.
Bootstrap-4
Bootstrap-Questions
HTML-Questions
Bootstrap
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.