Tooltips & popovers
Bootstrap 5.3 overlays: Tooltip and Popover with data-bs-* attributes, data-bs-custom-class for themed variants, and data-bs-theme on the document for light/dark. Tooltips/popovers are moved to body by default so they follow the page theme, not a nested dark strip.
Floating UI + Popper
Hover, focus, or click triggers; HTML content where appropriate; and accent styles scoped with custom classes. Toggle the navbar theme to verify contrast on arrows, headers, and glass surfaces.
Tooltips
Placements · eight directions
Side positions use Popper’s left and right (Bootstrap’s AttachmentMap in v5.3 does not map start/end, so those strings would not resolve to opposite sides).
Tooltips
Semantic color skins
data-bs-custom-class maps to .tp-c-* in styles.css.
Tooltips
HTML body · wide max-width
Tooltips
Triggers
Tooltips
Delay · disabled pattern
Tooltips
Manual API
Programmatic show/hide on the badge target.
Tooltips
Icons · links · badges · field
· Pro ·
Focus the input to see a right-placed tooltip.
Note
Overflow & container
When a parent uses overflow: hidden, pass data-bs-container="body" so the overlay isn’t clipped.
Popovers
Directions · click to toggle
Popovers
Dismiss on focus loss
Popovers
Hover + focus
Popovers
Offset · auto-close
Popovers
Accent headers · custom class
Popovers
Rich HTML · glass surface
Popovers
Disabled control
Popovers
Long body copy
Nested data-bs-theme="dark"
Same document theme for overlays
These controls sit on a dark surface, but tooltips/popovers are still attached to body under the root data-bs-theme. Toggle the navbar sun/moon to restyle them.