BootstrapHow-ToBeginner · 3 min read

How to Create Tooltip in Bootstrap: Simple Guide

To create a tooltip in Bootstrap, add the data-bs-toggle="tooltip" attribute to an element and initialize tooltips with JavaScript using bootstrap.Tooltip. Tooltips show small informative text when users hover or focus on the element.

📐

Syntax

Use the data-bs-toggle="tooltip" attribute on any HTML element to enable a tooltip. Add title attribute to set the tooltip text. Initialize tooltips in JavaScript with new bootstrap.Tooltip(element).

data-bs-toggle="tooltip": Activates tooltip on the element.
title: Text shown inside the tooltip.
JavaScript initialization: Required to enable tooltip functionality.

html

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text here">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>

Output

A button labeled 'Hover me' that shows a small tooltip with text 'Tooltip text here' when hovered or focused.

💻

Example

This example shows a button with a tooltip that appears on hover. The tooltip text is set with the title attribute, and JavaScript initializes the tooltip functionality.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Tooltip Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" title="This is a tooltip!">Hover over me</button>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
  tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el))
</script>

</body>
</html>

Output

A blue button labeled 'Hover over me' that shows a tooltip with text 'This is a tooltip!' when hovered or focused.

⚠️

Common Pitfalls

Not including Bootstrap's JavaScript or initializing tooltips will prevent tooltips from working.
Forgetting the title attribute means no tooltip text will appear.
Using data-toggle instead of data-bs-toggle in Bootstrap 5 causes tooltips to fail.
Initializing tooltips before the DOM is fully loaded can cause errors.

html

<!-- Wrong: Missing JavaScript initialization -->
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="No JS init">Hover me</button>

<!-- Right: Include JS and initialize -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    tooltipTriggerList.forEach(el => new bootstrap.Tooltip(el))
  });
</script>

📊

Quick Reference

Here is a quick summary to create tooltips in Bootstrap:

Step	Description
1	Add `data-bs-toggle="tooltip"` and `title` to the element.
2	Include Bootstrap CSS and JS files in your page.
3	Initialize tooltips with JavaScript: `new bootstrap.Tooltip(element)`.
4	Optionally customize placement with `data-bs-placement` attribute (top, bottom, left, right).

✅

Key Takeaways

Add data-bs-toggle="tooltip" and title attributes to enable tooltips on elements.

Always include Bootstrap's JavaScript and initialize tooltips with new bootstrap.Tooltip().

Use data-bs-placement to control where the tooltip appears relative to the element.

Ensure tooltips are initialized after the page content loads to avoid errors.

Bootstrap 5 uses data-bs-* attributes; older data-toggle attributes will not work.