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.
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.
- How to enable Bootstrap tooltip on disabled button ?
- How to use complex HTML with twitter Bootstrap tooltip using jQuery ?
- Building Tooltip using CSS
- jQuery UI | Tooltip
- CSS | Tooltip Fade In Animation
- How to Create Link Tooltip Using CSS3 and jQuery ?
- Include Bootstrap in AngularJS using ng-bootstrap
- Difference between bootstrap.css and bootstrap-theme.css
- Difference Between Bootstrap 3 and Bootstrap 4
- Difference between Bootstrap 4 and Bootstrap 5
- Beginning BootStrap (Part-1) | Introduction and Installation
- Beginning BootStrap (Part-2) | Grid System
- Bootstrap (Part-3) | Buttons, Glyphicons, Tables
- Bootstrap (Part-5) | DropDowns and Responsive Tabs
- Bootstrap (Part-4) | Vertical Forms, Horizontal Forms, Inline Forms
- How to get circular buttons in bootstrap 4 ?
- Bootstrap (Part-6) | Progress Bar and Jumbotron
- Bootstrap (Part-7) | Alerts , Wells, Pagination and Pager
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.