WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Tooltip

Previous Next

Tooltips in Bootstrap 5 are small popup boxes that appear when the user hovers over, focuses on, or taps an element. 

Basic Tooltip:

To enable a tooltip, you need to add the data-bs-toggle="tooltip" attribute to the target element (e.g., a button or link) and use the title attribute to specify the content that will be displayed.

Example
<div class="p-1">
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="This is a tooltip!">
Hover over me
</button>
</div>
<script>
// Initialize all tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
Try it yourself

Positioning Tooltips:

You can control the placement of the tooltip by using the data-bs-placement attribute. The possible values are: top,left,right,bottom

Example
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip on top" data-bs-placement="top">
Hover me (top)
</button>

<button type="button" class="btn btn-success" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
Hover me (right)
</button>

<button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
Hover me (left)
</button>

<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
Hover me (bottom)
</button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
</script>
Try it yourself

Disabling Tooltips:

To disable a tooltip, you can use the disable method in JavaScript:

Example
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip on top" data-bs-placement="top">
Hover me
</button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
var tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
tooltip.dispose(); // Disable the tooltip
return tooltip;
});
</script>
Try it yourself

Tooltip with HTML Content:

If you want the tooltip to contain HTML content (like links, images, etc.), you can use the html option in JavaScript.

Example
<button type="button" class="btn btn-primary tooltipHTML" data-bs-toggle="tooltip" title="This is <strong>HTML</strong> content" data-bs-placement="top">
Hover me
</button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('.tooltipHTML'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl,{
html: true
});
});
</script>
Try it yourself

Tooltip Delay and Other Options:

You can adjust the delay, animation, and other options when initializing the tooltip.

Example
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="This is content" data-bs-placement="top">
Hover me
</button>

<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl,{
delay: { "show": 500, "hide": 100 }, // Show delay of 500ms and hide delay of 100ms
animation: true // Enable animation
});
});
</script>
Try it yourself

Previous Next