How to Position Tooltip in button using Bootstrap ?

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>

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>
  

Output:

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