Bootstrap Tooltips

Bootstrap tooltips are small pop-up windows that appear when the user hovers over an element. They are useful for providing additional information or context to the user.

Syntax

To add a tooltip to an element, you need to add the data-toggle and title attributes to the element. Here's the syntax:

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top"
    data-bs-custom-class="custom-tooltip" data-bs-title="This top tooltip is themed via CSS variables.">
    Hover over me
</button>

Make sure to include the following JavaScript code to initialize the tooltip:

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

Explanation

In the code above, we used the following attributes:

• data-toggle: this tells Bootstrap to toggle the tooltip on hover or click.
• title: this is the text that shows up inside the tooltip.
• $(document).ready(function(){...});: this is a JavaScript function that initializes the tooltips on the page.

Use

Tooltips can be used for various purposes such as providing additional information, clarification, or context to the user. They are especially useful when dealing with complex interfaces or forms.

Important Points

• Bootstrap tooltips are small pop-up windows that appear on hover or click.
• To add a tooltip in Bootstrap, you need to add the data-toggle and title attributes to the element.
• Initialize the tooltips with the $(document).ready(function(){...}); JavaScript function.

Summary

Bootstrap tooltips provide a simple yet effective way to provide additional information to the user. By using the data-toggle and title attributes, you can easily add tooltips to any element on your website.