Skip to content
Related Articles

Related Articles

Improve Article

How to Position Tooltip in button using Bootstrap ?

  • Difficulty Level : Easy
  • Last Updated : 18 Aug, 2021
Geek Week

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :