Open In App

How to Position Tooltip in button using Bootstrap ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.



Last Updated : 18 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads