Skip to content
Related Articles

Related Articles

How to Position Tooltip in button using Bootstrap ?

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 18 Aug, 2021
Improve Article
Save Article

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 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=
    <script src=
    </script>
    <script
      src=
      crossorigin="anonymous">
    </script>
    <script src=
    </script>
    <script src=
    </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=
    <script src=
    </script>
    <script
      src=
      crossorigin="anonymous">
    </script>
    <script src=
    </script>
    <script src=
    </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.


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!