❮ Previous Next ❯

Tooltip Components

  • Add tooltips and popovers to improve user interaction.

  • Introduction to Tooltip Components

    Tooltip components are used to display small contextual information to users without cluttering the UI.

    In Bootstrap 5, Tooltips and Popovers are interactive components that:

    • Appear on hover, focus, or click

    • Provide additional information

    • Improve usability and clarity

    Important:
    Both Tooltips and Popovers require Bootstrap JavaScript AND initialization.

    Tooltips

    What Is a Tooltip ?

    A Tooltip is a small text box that appears when a user:

    • Hovers over an element

    • Focuses on an element

    • Interacts with an element

    Tooltips are used for:

    • Explaining icons

    • Clarifying buttons

    • Showing short hints

    • Improving accessibility

    Tooltips should contain very short text.

    Why Tooltips Are Important

    Tooltips:

    • Reduce UI clutter

    • Provide instant guidance

    • Improve usability

    • Help first-time users

    • Explain icons without labels

    Tooltips are assistive, not primary content.

    Tooltip Requirements

    To use tooltips, you must:

    1. Include Bootstrap CSS

    2. Include Bootstrap JavaScript

    3. Initialize tooltips using JavaScript

    Without initialization, tooltips will not appear.

Creating and Initializing a Tooltip

Tooltips display small popup text on hover and require JavaScript initialization to work. 

<!-- Tooltip Button -->
<button type="button"
        class="btn btn-secondary"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="This is a tooltip">
  Hover me
</button>

<!-- JavaScript Initialization -->
<script>
  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
  const tooltipList = [...tooltipTriggerList].map(el => new bootstrap.Tooltip(el));
</script>

  • Understanding Tooltip Code

    Attribute / ClassPurpose
    data-bs-toggle="tooltip"Enables tooltip
    titleTooltip text
    data-bs-placementTooltip position
    bootstrap.Tooltip()Initializes tooltip

Setting Tooltip Position

The data-bs-placement attribute controls where the tooltip appears around the element. 

<!-- Placement Options -->
data-bs-placement="top"
data-bs-placement="bottom"
data-bs-placement="left"
data-bs-placement="right"

<!-- Example -->
<button class="btn btn-info"
        data-bs-toggle="tooltip"
        data-bs-placement="right"
        title="Right tooltip">
  Right Tooltip
</button>

  • Tooltip Best Practices

    • Keep text short (1 line)

    • Do not place critical information in tooltips

    • Use tooltips mainly for icons

    • Ensure keyboard accessibility

    • Avoid overusing tooltips

      Popovers

      What Is a Popover ?

      A Popover is similar to a tooltip but:

      • Can contain more content

      • Supports a title + body

      • Appears on click or focus

      Popovers are used for:

      • Extra explanations

      • Inline help

      • Small content previews

      • Action hints

        Tooltip vs Popover

        FeatureTooltipPopover
        ContentShort textTitle + content
        TriggerHover / focusClick / focus
        SizeSmallLarger
        Use caseHintsDetails

        Popover Requirements

        Like tooltips, popovers require:

        • Bootstrap JavaScript

        • Manual initialization

      Creating and Initializing a Popover

      Popovers show additional content on click and require JavaScript initialization to function. 

      <!-- Popover Button -->
<button type="button"
        class="btn btn-primary"
        data-bs-toggle="popover"
        title="Popover Title"
        data-bs-content="This is popover content.">
  Click me
</button>

<!-- JavaScript Initialization -->
<script>
  const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
  const popoverList = [...popoverTriggerList].map(el => new bootstrap.Popover(el));
</script>
      • Understanding Popover Code
        AttributePurpose
        data-bs-toggle="popover"Enables popover
        titlePopover heading
        data-bs-contentPopover body
        bootstrap.Popover()Initializes popover

      Setting Popover Position

      The data-bs-placement attribute controls where the popover appears around the element. 

      <!-- Placement Options -->
data-bs-placement="top"
data-bs-placement="bottom"
data-bs-placement="left"
data-bs-placement="right"

<!-- Example -->
<button class="btn btn-warning"
        data-bs-toggle="popover"
        data-bs-placement="bottom"
        title="Info"
        data-bs-content="Extra details here">
  Bottom Popover
</button>

      • Dismissible Popover

      Creating a Dismissible Popover

      Using data-bs-trigger="focus" makes the popover close automatically when clicking outside. 

      <button type="button"
        class="btn btn-danger"
        data-bs-toggle="popover"
        data-bs-trigger="focus"
        title="Dismissible"
        data-bs-content="Click outside to close">
  Focus Popover
</button>

      • Popover Best Practices

        • Use popovers for secondary information

        • Avoid large content

        • Do not replace modals with popovers

        • Ensure clear triggers

        • Avoid multiple popovers on one screen

        Common Mistakes

        • Forgetting JavaScript initialization

        • Using tooltips for long content

        • Overusing popovers

        • Placing critical info inside tooltips

        • Ignoring mobile behavior

      ❮ Previous Next ❯