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>
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.
Please Login to comment...