tooltip

A helpful description of an element when hovered or focused.

New Dish

Import

Import just the tooltip styles.

@import "@winnie-ui/css/spatial/tooltip";
@import "@winnie-ui/css/visual/tooltip";

Anatomy

Attach the appropriate data attributes in the structure below.

<div data-component="tooltip">
  <span data-slot="label"></span>
  <kbd data-slot="shortcut"></kbd>
</div>

Examples

Size

Use the data-size attribute to change the size of the tooltip.

New Dish

Radius

Use the data-radius attribute to change the radius of the tooltip.

New Dish

Shortcuts

Use the shortcut slot as a child of the tooltip to show a keyboard shortcut.

New Dish ⌘ D

Multiline

While long tooltips are supported by Winnie, we do not recommend them as a UI practice. Ideally, tooltips are short, descriptive text used to describe the intent of an action or subject.

Today's Special: Grilled Lemon Herb Chicken with seasonal vegetables. Served with a side of garlic mashed potatoes. Click to view the full menu!

<div data-component="tooltip">
  <span data-slot="label">
    Today's Special: Grilled Lemon Herb Chicken with seasonal vegetables.
    Served with a side of garlic mashed potatoes. Click to view the full
    menu!
  </span>
</div>

Reference

Below is a list of the available tooltip data- attributes that are available.

Attribute	Value
`data-radius`	`"none" \| "1" \| "2" \| "3" \| "round"`
`data-size`	`"sm" \| "md" \| "lg"`

Variable
`--wui-tooltip-background`
`--wui-tooltip-border`
`--wui-tooltip-box-shadow`
`--wui-tooltip-color`
`--wui-tooltip-shortcut-color`
`--wui-tooltip-shortcut-font-family`