Bootstrap 5 Tutorial
BS5 Tooltip
Bootstrap 5 Tooltip
When the mouse pointer is over an element, a little pop-up box known as the Tooltip component emerges.
==== button mukavu ====
How To Create a Tooltip
Add the data-toggle=”tooltip” attribute to an element in order to produce a tooltip.
To provide the text that should appear inside the tooltip, use the title attribute:
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Hooray!">Hover over me!</button>
Note: For tooltips to function, JavaScript must be initialized.
All of the document’s tooltips will be enabled by the code below:
Example
<script>
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl)
})
</script>
Positioning Tooltips
The tooltip will always show up above the element.
To position the tooltip at the top, bottom, left, or right of the element, use the data-placement attribute:
Example
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
