noora/docs/components/tooltip.md
Explains an element on pointer hover or keyboard focus.
<noora-tooltip title="Copy"><button slot="trigger">Copy</button></noora-tooltip>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
disabled | boolean | false | Disables the tooltip. |
size | small, large | "small" | Controls the content layout. |
title | string | "" | Sets the tooltip title. |
description | string | None | Sets the large-tooltip description. |
open | boolean | false | Controls whether the tooltip is open. |
| Event | Type | Description |
|---|---|---|
noora-open-change | CustomEvent<{ open: boolean }> | Emitted when the tooltip opens or closes. |
| Slot | Description |
|---|---|
trigger | The described element. |
icon | An icon shown by large tooltips. |
| Part | Description |
|---|---|
trigger | The trigger wrapper. |
content | The tooltip content. |
Explain an icon or compact action.
<noora-tooltip title="Tooltip"><noora-icon slot="trigger" name="alert_circle" label="More information"></noora-icon></noora-tooltip>
Add an icon and supporting description.
<noora-tooltip size="large" title="Tooltip" description="Insert tooltip description here. Three lines of text would look better."><noora-icon slot="trigger" name="alert_circle" label="More information"></noora-icon><noora-icon slot="icon" name="category"></noora-icon></noora-tooltip>