The Tooltip is an attribute directive (jigTooltip) you place on any element to attach a small, transient overlay that appears on hover or focus. The content is passed through the directive ([jigTooltip]="...") as a plain string or a TemplateRef; a falsy value shows nothing. The overlay is created lazily on first show and positioned with floating-ui, so it flips and shifts to stay on screen.

For short, supplementary hints only. When you need focusable content, actions, or a persistent panel, use a popover instead.

Basic Usage

Bind the hint text to [jigTooltip] on the anchor element; the overlay opens on hover or focus and needs no further wiring.

Placement Options

jigTooltipPlacement controls the side the tooltip prefers (default bottom); auto-positioning still overrides it when there isn't room. jigTooltipOffset sets the gap from the anchor (default 4px), and jigTooltipSize constrains the tooltip's width/height when the content would otherwise grow too large.

Show/hide timing is tunable via jigTooltipShowDelay (default 0.5s) and jigTooltipHideDelay (default 0.1s), which accept a TimeSpan or a number of milliseconds. Whether it opens on hover and/or focus is controlled by jigTooltipShowOnHover and jigTooltipShowOnFocus (both on by default).

Show Only If Truncated

Set jigTooltipShowOnlyIfTruncated to only reveal the tooltip when the anchor's text is actually clipped (ellipsis or line-clamp). This is the idiomatic way to surface the full text of a truncated cell or label without cluttering rows that already fit.

Arrow Options

jigTooltipShowArrow (on by default) toggles the little pointer connecting the tooltip to its anchor.

Accessibility

Tooltips are not focusable, close on Escape, and hide on click by default, and must never hold interactive content or information the user can't get elsewhere. By default the directive wires ARIA automatically (autoAriaMode: 'description'), describing the anchor via aria-description / aria-describedby; switch to 'label' to name the element instead, or 'none' to manage ARIA yourself.