Bootstrap Tooltips
A Bootstrap tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element. Keep reading these examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.
Example
Primary
Info
Success
Warning
Danger
Default
Secondary
<button type= "button" class= "btn bg-gradient-dark btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" data-container= "body" data-animation= "true" > Primary</button>
<button type= "button" class= "btn bg-gradient-info btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" data-container= "body" data-animation= "true" > Info</button>
<button type= "button" class= "btn bg-gradient-success btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" data-container= "body" data-animation= "true" > Success</button>
<button type= "button" class= "btn bg-gradient-warning btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" data-container= "body" data-animation= "true" > Warning</button>
<button type= "button" class= "btn bg-gradient-danger btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" data-container= "body" data-animation= "true" > Danger</button>
<button type= "button" class= "btn bg-gradient-default btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" data-container= "body" data-animation= "true" > Default</button>
<button type= "button" class= "btn bg-gradient-secondary btn-tooltip" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Tooltip on bottom" data-container= "body" data-animation= "true" > Secondary</button>
Position
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
<button type= "button" class= "btn btn-dark btn-sm" data-bs-toggle= "tooltip" data-bs-placement= "top" title= "Tooltip on top" >
Tooltip on top
</button>
<button type= "button" class= "btn btn-dark btn-sm" data-bs-toggle= "tooltip" data-bs-placement= "right" title= "Tooltip on right" >
Tooltip on right
</button>
<button type= "button" class= "btn btn-dark btn-sm" data-bs-toggle= "tooltip" data-bs-placement= "bottom" title= "Tooltip on bottom" >
Tooltip on bottom
</button>
<button type= "button" class= "btn btn-dark btn-sm" data-bs-toggle= "tooltip" data-bs-placement= "left" title= "Tooltip on left" >
Tooltip on left
</button>