Bootstrap Tooltip Plugin

Bootstrap Tooltip is a small pop-up that appears when a user hovers over, focuses on, or taps an element. Tooltips are typically used to provide extra information about a button, link, or form element.

Available in Bootstrap 3, 4, and 5. Requires JavaScript/jQuery (Bootstrap 3/4) or just Bootstrap JS (Bootstrap 5).

✅ Basic Tooltip

Key Points:

  • data-toggle="tooltip" → Enables tooltip on this element.

  • title="..." → Tooltip text.

  • Needs JavaScript initialization (for Bootstrap 3/4):

🔹 Tooltip Placement

You can place tooltips top, bottom, left, or right:

  • data-placement="top|bottom|left|right" → Sets tooltip position relative to the element.

🔹 Tooltip with HTML Content

  • data-html="true" → Allows HTML inside tooltip content.

🔹 Tooltip Trigger Options

By default, tooltips appear on hover/focus. You can change triggers:

  • data-trigger="click|hover|focus|manual" → Defines how tooltip is activated.

🔹 Tooltip via JavaScript

  • Useful for dynamic content or programmatic tooltips.

✔ Summary of Tooltip Features

Feature Supported
Simple tooltip on hover/focus ✔️
Placement (top, bottom, left, right) ✔️
HTML content inside tooltip ✔️
Trigger options (hover, click, focus, manual) ✔️
Works on buttons, links, images, inputs ✔️

You may also like...