Tooltip

Hover and focus hints with side, alignment, delay, keyboard dismissal, arrow variants, and RTL support.

01 Hero Preview

Grid: 8px · Scale: 1:1

02 Usage

import { FrButtonModule } from '@frame-ui-ng/components/button';
import { FrTooltipModule } from '@frame-ui-ng/components/tooltip';

HTML

<button frButton frTooltip="Helpful details." type="button">
  Hover for context
</button>

03 Examples

Basic

Use a tooltip for concise supplemental information on hover or keyboard focus.

Component Sheet

Grid: 8px · Scale: 1:1

Arrow

Use arrow when the trigger relationship benefits from a stronger visual pointer.

Component Sheet

Grid: 8px · Scale: 1:1

Side

Set side to top, right, bottom, or left. The overlay falls back when space is tight.

Component Sheet

Grid: 8px · Scale: 1:1

With Keyboard Shortcut

Tooltips can include tiny shortcut hints when an action has a matching key command.

Component Sheet

Grid: 8px · Scale: 1:1

Disabled Button

Wrap disabled buttons because native disabled controls do not dispatch hover or focus events.

Component Sheet

Grid: 8px · Scale: 1:1

Delay

Tune open and close delays for dense toolbars where accidental hover is common.

Component Sheet

Grid: 8px · Scale: 1:1

RTL

Tooltip positioning works in right-to-left layouts and keeps content direction intact.

Component Sheet

Grid: 8px · Scale: 1:1

04 Custom Styling

Set tooltip tokens on the trigger. The overlay copies --frame-tooltip-* custom properties to the floating panel when it opens.

Component Sheet

Grid: 8px · Scale: 1:1

05 Token Inspector

The preview renders a persistent static panel so you can inspect tooltip surface, text, arrow, and motion tokens without fighting hover state.

06 Design Tokens

Use these CSS custom properties to tune tooltip surface, typography, shortcut hints, arrow size, and entrance motion.

SCSS

--frame-tooltip-content-bg: var(--frame-foreground);
--frame-tooltip-content-color: var(--frame-background);
--frame-tooltip-content-border: transparent;
--frame-tooltip-content-radius: var(--frame-radius-md);
--frame-tooltip-content-shadow: 0 12px 32px rgb(0 0 0 / 0.18);
--frame-tooltip-content-padding: 0.375rem 0.625rem;
--frame-tooltip-content-max-width: 18rem;
--frame-tooltip-content-font-size: 0.8125rem;
--frame-tooltip-content-font-weight: 500;
--frame-tooltip-content-line-height: 1.35;
--frame-tooltip-shortcut-bg: color-mix(in srgb, currentColor 14%, transparent);
--frame-tooltip-shortcut-radius: var(--frame-radius-sm);
--frame-tooltip-shortcut-padding: 0.0625rem 0.3125rem;
--frame-tooltip-shortcut-font-size: 0.75rem;
--frame-tooltip-arrow-size: 0.5rem;
--frame-tooltip-motion-duration: 140ms;
--frame-tooltip-motion-distance: 0.25rem;
--frame-tooltip-motion-scale: 0.96;
--frame-tooltip-motion-easing: cubic-bezier(0.16, 1, 0.3, 1);