In Bootstrap 5, the Tooltip component is used to create small pop-up messages that appear when the user hovers over an element. Tooltips provide additional information or context about the element and are commonly used to enhance the user experience. Here's an example of how to create a basic tooltip in Bootstrap 5:

html
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip Text">Hover Me</button>

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

In this example, we have a button element with the classes `btn` and `btn-primary`. The tooltip is enabled by adding the `data-bs-toggle="tooltip"` attribute to the button. The `data-bs-placement` attribute specifies the placement of the tooltip, and the `title` attribute contains the text that will be displayed in the tooltip.

To activate the tooltip, JavaScript is used. The `script` section at the bottom of the code initializes the tooltip by selecting all elements with the `data-bs-toggle="tooltip"` attribute and creating a new `Tooltip` object for each element.

Make sure to include the Bootstrap JavaScript file (`bootstrap.js` or `bootstrap.min.js`) and the Bootstrap CSS file (`bootstrap.css` or `bootstrap.min.css`) in your HTML document for the tooltip to work properly.

You can customize the appearance and behavior of the tooltip by adding additional attributes, such as `data-bs-animation` to specify the animation style, or by modifying the styles using CSS.

Bootstrap 5 also provides options for configuring the tooltip's delay, triggering events, and other features. You can refer to the Bootstrap documentation for more details and examples on working with tooltips in Bootstrap 5.

About the Author

Silan Software

Silan Software is one of the India's leading provider of offline & online training for Java, Python, AI (Machine Learning, Deep Learning), Data Science, Software Development & many more emerging Technologies.

We provide Academic Training || Industrial Training || Corporate Training || Internship || Java || Python || AI using Python || Data Science etc