Tooltips

Attach concise helper text to controls and links with placement, trigger, and delay options.

Overview

Place bs-tooltip inside the element that should trigger the tooltip. Bootstrap initializes the generated data-bs-* attributes on the trigger and uses Popper for positioning.

Initialize tooltip triggers from JavaScript once the page is ready: document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(element => bootstrap.Tooltip.getOrCreateInstance(element));

Tooltips are opt-in for performance and should contain short supplemental text. Attach them to focusable controls or links so keyboard users can reach the same information.

Enable tooltips

Add a captured bs-tooltip to a trigger helper. The trigger stays in the normal document flow while the tooltip content is emitted as Bootstrap data for initialization.

Focus this inline link for an inline tooltip.

aspnet 

<bs-button btn-style="Secondary">
    Tooltip button
    <bs-tooltip trigger="Hover">Button tooltip</bs-tooltip>
</bs-button>
<bs-p top-margin="Default3" bottom-margin="None">
    Focus this
    <bs-anchor href="#" link-color="Primary">inline link<bs-tooltip trigger="Focus">Inline tooltip</bs-tooltip></bs-anchor>
    for an inline tooltip.
</bs-p>

Tooltips on links

Links can host tooltips when the extra text is supplemental. Do not put essential-only information in a tooltip.

Placeholder text with an inline tooltip and another focused link.

aspnet 

<bs-p>
    Placeholder text with
    <bs-anchor href="#" link-color="Primary">an inline tooltip<bs-tooltip>Tooltip</bs-tooltip></bs-anchor>
    and another
    <bs-anchor href="#" link-color="Primary">focused link<bs-tooltip placement="Top">Another tooltip</bs-tooltip></bs-anchor>.
</bs-p>

Custom tooltips

Use custom-class when site CSS defines a themed tooltip surface, or captured CSS variables for local style extraction tests.

aspnet 

<bs-button btn-style="Secondary">
    Custom tooltip
    <bs-tooltip custom-class="custom-tooltip" placement="Right">Styled by the custom tooltip class.</bs-tooltip>
</bs-button>
<bs-button btn-style="Secondary">
    Fuchsia tooltip
    <bs-tooltip placement="Right" style="--bs-tooltip-bg: #c2187a; --bs-tooltip-color: #fff;">Styled with captured CSS variables.</bs-tooltip>
</bs-button>

Directions

Use top, bottom, left, and right placements. These docs intentionally avoid the start/end aliases so the rendered placement is explicit.

aspnet 

<bs-div display="Flex" flex-wrap="Wrap" gap="Default2">
    <bs-button btn-style="Secondary">Top<bs-tooltip placement="Top">Top tooltip</bs-tooltip></bs-button>
    <bs-button btn-style="Secondary">Bottom<bs-tooltip placement="Bottom">Bottom tooltip</bs-tooltip></bs-button>
    <bs-button btn-style="Secondary">Left<bs-tooltip placement="Left">Left tooltip</bs-tooltip></bs-button>
    <bs-button btn-style="Secondary">Right<bs-tooltip placement="Right">Right tooltip</bs-tooltip></bs-button>
    <bs-button btn-style="Secondary">HTML<bs-tooltip><em>Tooltip</em> <u>with</u> <b>HTML</b></bs-tooltip></bs-button>
</bs-div>

Triggers, delay, and containers

Use trigger and delay attributes for focus-only or hover-only help. Set container when the tooltip should be appended to a stable ancestor such as body. Avoid hover-only patterns when keyboard users need the same cue.

aspnet 

<bs-div display="Flex" flex-wrap="Wrap" gap="Default2">
    <bs-button btn-style="Primary">
        Focus tooltip
        <bs-tooltip trigger="Focus" placement="Bottom">Dismisses when focus leaves the button.</bs-tooltip>
    </bs-button>
    <bs-button btn-style="Primary" outline="true">
        Delayed tooltip
        <bs-tooltip trigger="Hover" delay-show="300" delay-hide="100" container="body">Shows after a short delay.</bs-tooltip>
    </bs-button>
</bs-div>

CSS

Variables

Tooltips use Bootstrap local CSS variables for z-index, max width, color, background, radius, opacity, padding, margin, arrow sizing, and arrow color. Use custom-class when a page needs a scoped tooltip theme.

Sass variables

Tooltip Sass variables remain stylesheet concerns; BCL helpers emit the documented trigger attributes and let the approved Bootstrap stylesheet own the rendered surface.

Usage

The tag helper keeps the tooltip text close to the trigger in Razor while emitting Bootstrap's documented data attributes. Tooltips should be attached to focusable or interactive elements so keyboard and assistive-technology users can reach them.

Markup

aspnet 

<bs-button btn-style="Secondary">
<bs-tooltip placement="Top">Tooltip text</bs-tooltip>
Hover for tooltip
</bs-button>

Disabled elements

Wrap disabled controls in a focusable element when the tooltip must remain reachable.

aspnet 

<bs-div tabindex="0" display="InlineBlock">
    <bs-tooltip trigger="@(BootstrapTrigger.Hover | BootstrapTrigger.Focus)">Disabled tooltip</bs-tooltip>
    <bs-button btn-style="Primary" disabled="true" pointer-events="None">Disabled button</bs-button>
</bs-div>

Options

  • Use placement, trigger, container, delay-show, delay-hide, and custom-class for the common Bootstrap options.
  • Use bootstrap.Tooltip.getOrCreateInstance(element) for dynamic triggers.
  • Call show(), hide(), toggle(), enable(), disable(), or dispose() on the tooltip instance.
  • Bootstrap raises show.bs.tooltip, shown.bs.tooltip, hide.bs.tooltip, hidden.bs.tooltip, and inserted.bs.tooltip.

Methods

javascript 

const trigger = document.querySelector('[data-bs-toggle="tooltip"]');
const tooltip = bootstrap.Tooltip.getOrCreateInstance(trigger);
tooltip.show();
tooltip.hide();
tooltip.dispose();

Events

Tooltip lifecycle events remain Bootstrap events, but the captured tooltip helper can bind them declaratively on the trigger it configures.

aspnet 

<bs-button btn-style="Secondary">
    Event tooltip
    <bs-tooltip on-shown="console.log('tooltip shown', event.target)" on-hidden="console.log('tooltip hidden', event.target)" on-inserted="console.log('tooltip inserted', event.target)">Show and hide this tooltip to inspect lifecycle events.</bs-tooltip>
</bs-button>