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

Hover over me

</button>

</div>

// 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

Hover me (top)

</button>

Hover me (right)

</button>

Hover me (left)

</button>

Hover me (bottom)

</button>

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

Hover me

</button>

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>

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

Hover me

</button>

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 ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.