Explains an element on pointer hover or keyboard focus.
Explains an element on pointer hover or keyboard focus.
import "@tuist/noora/tokens.css";
import "@tuist/noora/web-components";
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>
| 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. |
| Name | Description |
|---|---|
trigger
|
The described element. |
icon
|
An icon shown by large tooltips. |
| Name | Description |
|---|---|
trigger
|
The trigger wrapper. |
content
|
The tooltip content. |