Tooltip

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

Preview

Usage

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

HTML

<frame-tooltip>
  <button frButton [frTooltipTrigger]="tip" type="button">
    Hover for context
  </button>

  <ng-template #tip="frTooltipContent" frTooltipContent>
    <div frTooltipPanel>Helpful details.</div>
  </ng-template>
</frame-tooltip>

Examples

Basic

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

Arrow

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

Side

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

With Keyboard Shortcut

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

Disabled Button

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

Delay

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

RTL

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

Custom Styling

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

Token Inspector

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

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, #09090b);
--frame-tooltip-content-color: var(--frame-background, #fff);
--frame-tooltip-content-border: transparent;
--frame-tooltip-content-radius: var(--frame-radius-md, 0.5rem);
--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: 0.25rem;
--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);