0
0
Bootsrapmarkup~5 mins

Tooltip component in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Tooltips show helpful text when you hover or focus on an element. They guide users without cluttering the page.

To explain the meaning of an icon or button on hover.
To give extra info about a form field without taking space.
To show keyboard shortcuts or tips for interactive elements.
To clarify abbreviations or technical terms on a page.
To provide hints on disabled or unclear controls.
Syntax
Bootsrap
<button type="button" class="btn btn-secondary" 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>
Use data-bs-toggle="tooltip" to mark elements that show tooltips.
Initialize tooltips with JavaScript after the page loads to make them work.
Examples
This button shows a tooltip on the right side when hovered.
Bootsrap
<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">Right Tooltip</button>
A link with a tooltip that appears below it.
Bootsrap
<a href="#" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip at bottom">Bottom Tooltip Link</a>
A text span that shows a tooltip on the left side.
Bootsrap
<span data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">Hover over me</span>
Sample Program

This page shows a blue button. When you move your mouse over it, a small box with the text "This is a tooltip!" appears above the button.

Bootsrap
<!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>
  <main class="p-4">
    <button type="button" class="btn btn-info" data-bs-toggle="tooltip" data-bs-placement="top" title="This is a tooltip!">
      Hover over me
    </button>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    tooltipTriggerList.forEach(tooltipTriggerEl => {
      new bootstrap.Tooltip(tooltipTriggerEl)
    })
  </script>
</body>
</html>
OutputSuccess
Important Notes

Tooltips only appear on hover or keyboard focus for accessibility.

Always provide clear and short tooltip text to help users quickly.

Remember to include Bootstrap's CSS and JS files for tooltips to work.

Summary

Tooltips show extra info when hovering or focusing on elements.

Use data-bs-toggle="tooltip" and initialize with JavaScript.

They improve user experience by giving hints without clutter.