Overlays

AppTooltip

A plain tooltip on any element that shows on hover or focus.

<app-tooltip text="Save your work"><button>Save</button></app-tooltip>

<app-tooltip> wraps any element to show a short hint on hover or focus. It's simpler than <app-popover> (which is click-opened and can hold rich content) and distinct from <app-info-tip> (which is a help "?" icon beside a label). Use a tooltip for a quick explanation of a button, icon, or abbreviation.

Its look comes entirely from the shared @webority/theme, so the Razor <app-tooltip> and the React <AppTooltip> render identically on every Webority surface.

Playground

Every attribute, live. Each change re-renders the real tag helper on the server, so the markup underneath is the exact call that produced the trigger above it.

<app-tooltip content="Tooltip text">
    <app-button variant="outline">Hover or focus me</app-button>
</app-tooltip>

Basic tooltip

Wrap any element to add a tooltip. The text renders on hover or focus and vanishes when the pointer moves away or focus is lost.

A tooltip on a button
Show code 
<app-tooltip text="Save your work">
    <app-button variant="primary">Save</app-button>
</app-tooltip>
Auto-dismissThe tooltip vanishes when you move your pointer away or the element loses focus. No close button or manual dismiss needed.

Placement

Control where the tooltip appears relative to the trigger. The default is top; it flips to stay in view if the edge is near.

Placement options
Show code 
<app-tooltip text="Top" placement="top">…</app-tooltip>
<app-tooltip text="Bottom" placement="bottom">…</app-tooltip>
<app-tooltip text="Start" placement="start">…</app-tooltip>
<app-tooltip text="End" placement="end">…</app-tooltip>

Content

The content is plain text. React's <AppTooltip> accepts any rich ReactNode for its content prop — bold text, multiple lines, inline elements. Razor's <app-tooltip> renders once on the server, so content is a plain string only.

Plain-text content
Show code 
<app-tooltip content="Format: MM/DD/YYYY">
    <input type="text" placeholder="Birthday" class="form-control" />
</app-tooltip>
No rich content on RazorReact's content prop accepts a full ReactNode. Razor's content attribute is a plain string; for anything richer than a sentence, reach for <app-popover> instead.

On icon buttons

Tooltips are especially useful on icon buttons where the icon alone may not be immediately clear.

Icon buttons with tooltips
Show code 
<app-tooltip text="Download report">
    <app-action-icon icon="download" label="Download"></app-action-icon>
</app-tooltip>
<app-tooltip text="Edit details">
    <app-action-icon icon="pencil" label="Edit"></app-action-icon>
</app-tooltip>

Colors & custom design

Pick a preset with the tone attribute, or set the --wui-tooltip-* CSS vars from your own class for a fully custom colour. The arrow always follows the body colour.

Tone presets

Each trigger uses a different <app-button> variant, so variants render alongside the tinted tips.

Show code 
<app-tooltip content="Default"><app-button variant="secondary">Default</app-button></app-tooltip>
<app-tooltip content="Dark" tone="dark"><app-button variant="outline">Dark</app-button></app-tooltip>
<app-tooltip content="Primary" tone="primary"><app-button variant="primary">Primary</app-button></app-tooltip>
<app-tooltip content="Success" tone="success"><app-button variant="light">Success</app-button></app-tooltip>
<app-tooltip content="Warning" tone="warning"><app-button variant="warning">Warning</app-button></app-tooltip>
<app-tooltip content="Danger" tone="danger"><app-button variant="danger">Danger</app-button></app-tooltip>
Fully custom colour via CSS vars
Show code 
/* in your stylesheet */
.tip-brand { --wui-tooltip-bg: #6d28d9; --wui-tooltip-color: #fff; }

<app-tooltip content="On brand" class="tip-brand">
    <app-button variant="outline">Custom</app-button>
</app-tooltip>

Size

Three presets via the size attribute — sm, md (default), lg — or set the --wui-tooltip-* size vars from your own class for a fully custom size.

Size presets
Show code 
<app-tooltip content="Small tip" size="sm"><app-button size="sm">Small</app-button></app-tooltip>
<app-tooltip content="Medium tip"><app-button>Medium</app-button></app-tooltip>
<app-tooltip content="Large tip" size="lg"><app-button size="lg">Large</app-button></app-tooltip>
Fully custom size via CSS vars
Show code 
/* in your stylesheet */
.tip-xl {
    --wui-tooltip-font-size: 1rem;
    --wui-tooltip-padding-y: 12px;
    --wui-tooltip-padding-x: 16px;
    --wui-tooltip-max-width: 340px;
}

<app-tooltip content="A roomy custom tip" class="tip-xl">
    <app-button variant="outline">Custom size</app-button>
</app-tooltip>

When to use

Use it when

  • You need a quick, context-sensitive hint on an element.
  • The hint is a sentence or two — brief enough to read at a glance.
  • The element is understandable but benefits from a clarification (icon button, abbreviation, keyboard shortcut).

Reach for something else when

  • The information is essential — not everyone hovers. → Use a label or inline help.
  • The content is rich or interactive. → AppPopover
  • You're explaining a term next to a label. → AppInfoTip

Every option

The whole surface of the component, one cell per value.

placement — all four

placement="top"
placement="bottom"
placement="start"
placement="end"

tone — all six

tone="default"
tone="dark"
tone="primary"
tone="success"
tone="warning"
tone="danger"

size — all three

size="sm"
size="md"
size="lg"

content — short, long, and rich

content="Short tip"
content="A longer explanatory tooltip that wraps onto more than one line"
content — Razor is plain text only; React accepts a rich ReactNode

trigger element — any element that forwards a ref

trigger: app-button
trigger: app-action-icon
trigger: plain input
trigger: visually-disabled button — aria-disabled, still focusable

Attributes

AttributeTypeDefaultDescription
content *string—The tooltip text (required). Same as React content.
placementtop | bottom | start | endtopWhere the tooltip appears; prefers the given direction and flips if needed to stay in view.
tonedefault | dark | primary | success | warning | dangerdefaultPreset colour. default is the light surface look; the rest are solid tints. For any other colour, set the --wui-tooltip-* CSS vars from a class.
sizesm | md | lgmdPreset size (font-size + padding + max-width). For a custom size, set the --wui-tooltip-font-size / -padding-* / -max-width CSS vars from a class.
classstring—Forwarded onto the tooltip (via data-bs-custom-class) — use it to set custom --wui-tooltip-* CSS vars.
markup——Child content — the trigger element (any markup).