Bootstrap 4 | Tooltip
A Tooltip is used to provide interactive textual hints to the user about the element when the mouse pointer moves over. For Example, in the below image GeeksForGeeks is a button and when the user mouse moves over it, the additional information “A computer Science Portal” pops-up will display. Tooltip is quite useful for displaying the description of different elements in the webpage.
Create tooltip: The data-toggle=”tooltip” attribute is used to create a tooltip. The title attribute is used to specify the text that should be displayed inside the tooltip.
Example:
html
<!DOCTYPE html><html lang="en"><head> <title>Tooltip</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body style="text-align:center;"> <div class="container"> <h1 style="color:green;" data-toggle="tooltip" title="Tooltip"> GeeksforGeeks </h1> </div> <script> $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script></body></html> |
Output:
Positioning Tooltips: The data-placement attribute is used to set the position of tooltip attribute. The tooltip element can be displayed on the top, left, right or bottom side of the element.
Example:
html
<!DOCTYPE html><html lang="en"><head> <title>Tooltip</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head><body style="text-align:center;"> <div class="container"> <h1 style="color:green;"> GeeksforGeeks </h1> <h2>Positioning Tooltip</h2> <button data-toggle="tooltip" data-placement="top" title="Top tooltip">Top</button> <button data-toggle="tooltip" data-placement="bottom" title="Bottom tooltip">Bottom</button> <button data-toggle="tooltip" data-placement="left" title="Left tooltip">Left</button> <button data-toggle="tooltip" data-placement="right" title="Right tooltip">Right</button> </div> <script> $(document).ready(function() { $('[data-toggle="tooltip"]').tooltip(); }); </script></body></html> |
Output:
Supported Browser:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
