Bootstrap Tooltips

Bootstrap tooltips provide additional information or context when users hover over or interact with an element on a web page. They are often used to clarify the purpose of buttons, links, or other interactive elements. Here's how to use Bootstrap tooltips:

1. Basic Tooltip

To create a basic tooltip, add the data-bs-toggle="tooltip" attribute to the element and specify the tooltip text using the title attribute:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip text">
    Tooltip
</button>

Ensure you have initialized tooltips by calling the tooltip() method in JavaScript:

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

2. Tooltip Placement

Bootstrap tooltips can be positioned in different directions relative to the target element. You can specify the placement using the data-bs-placement attribute:

data-bs-placement="top"
data-bs-placement="bottom"
data-bs-placement="left"
data-bs-placement="right"

For example:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip text" data-bs-placement="top">
    Tooltip
</button>

3. Tooltip Trigger

You can specify the event that triggers the tooltip to appear using the data-bs-trigger attribute. By default, tooltips are triggered on hover:

data-bs-trigger="hover"
data-bs-trigger="click"
data-bs-trigger="focus"

For example:

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="Tooltip text" data-bs-trigger="click">
    Tooltip
</button>

4. Customizing Tooltip Appearance

You can customize the appearance of tooltips using CSS. Bootstrap provides various classes for styling, such as .tooltip-inner for the tooltip text and .tooltip-arrow for the arrow indicator.

For example:

.tooltip-inner {
  background-color: #007bff;
  color: #fff;
}

.tooltip.bs-tooltip-auto[x-placement^=left] .tooltip-arrow,
.tooltip.bs-tooltip-left .tooltip-arrow {
  border-left-color: #007bff;
}

Conclusion

Bootstrap tooltips are a handy way to provide additional information or context to users without cluttering the UI. By following these guidelines, you can effectively use tooltips to enhance user experience and improve usability on your website.

Archive