Tooltip
Tooltips display supplementary information about a specific element and help explain its function.
Import the component:
import 'mdui/components/tooltip.js';
Import the TypeScript type:
import type { Tooltip } from 'mdui/components/tooltip.js';
Example:
button
<mdui-tooltip content="Plain tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
By default, the tooltip displays plain text. The content attribute sets the tooltip content.
button
<mdui-tooltip content="Plain tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
SourceAlternatively, use the content slot.
<mdui-tooltip>
<mdui-button>button</mdui-button>
<div slot="content">
<div style="font-size: 1.4em">title</div>
<div>content</div>
</div>
</mdui-tooltip>
Source
For a rich text tooltip, set the variant attribute to rich. The tooltip's title and content can be specified using the headline and content attributes, respectively.
button
<mdui-tooltip
variant="rich"
headline="Rich tooltip"
content="Rich tooltips bring attention to a particular element or feature that warrants the user's focus. It supports multiple lines of informational text."
>
<mdui-button>button</mdui-button>
</mdui-tooltip>
SourceAlternatively, the headline and content slots can be used to specify the tooltip's title and content. The action slot is used to specify the tooltip's action button.
button
Rich tooltip
Rich tooltips bring attention to a particular element or feature that warrants the user's focus. It supports multiple lines of informational text.
Action
<mdui-tooltip variant="rich">
<mdui-button>button</mdui-button>
<div slot="headline">Rich tooltip</div>
<div slot="content">Rich tooltips bring attention to a particular element or feature that warrants the user's focus. It supports multiple lines of informational text.</div>
<mdui-button slot="action" variant="text">Action</mdui-button>
</mdui-tooltip>
Source
The placement attribute sets the tooltip's position.
<div class="example-placement">
<div class="row">
<mdui-tooltip placement="top-left" content="top-left">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top-start" content="top-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top" content="top">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top-end" content="top-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="top-right" content="top-right">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="left-start" content="left-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="right-start" content="right-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="left" content="left">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="right" content="right">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="left-end" content="left-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="right-end" content="right-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
<div class="row">
<mdui-tooltip placement="bottom-left" content="bottom-left">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom-start" content="bottom-start">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom" content="bottom">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom-end" content="bottom-end">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
<mdui-tooltip placement="bottom-right" content="bottom-right">
<mdui-card variant="outlined"></mdui-card>
</mdui-tooltip>
</div>
</div>
<style>
.example-placement mdui-card {
width: 2.5rem;
height: 2.5rem;
margin: 0.25rem;
}
.example-placement .row:nth-child(2) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(3) mdui-tooltip:last-child mdui-card,
.example-placement .row:nth-child(4) mdui-tooltip:last-child mdui-card {
margin-left: 10rem;
}
</style>
Source
The trigger attribute sets how the tooltip is triggered.
button
<mdui-tooltip trigger="click" content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
Source
When the trigger method is hover, the open-delay and close-delay attributes set the opening and closing delays, respectively. The values are in milliseconds.
button
<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
Source
The disabled attribute disables the tooltip.
button
<mdui-tooltip disabled content="tooltip">
<mdui-button>button</mdui-button>
</mdui-tooltip>
Source| Attribute | Property | Reflect | Type | Default |
|---|
variant | variant | | 'plain' | 'rich' | 'plain' |
Defines the tooltip variant. Default is plain. Possible values:
plain: For simple, single-line text.rich: For tooltips with a title, body text, and action buttons.
|
placement | placement | | 'auto' | 'top-left' | 'top-start' | 'top' | 'top-end' | 'top-right' | 'bottom-left' | 'bottom-start' | 'bottom' | 'bottom-end' | 'bottom-right' | 'left-start' | 'left' | 'left-end' | 'right-start' | 'right' | 'right-end' | 'auto' |
Sets the tooltip position. Default is auto. Possible values:
auto: Automatically determined. For variant="plain", prefers top; for variant="rich", prefers bottom-right.top-left: Top left.top-start: Top start.top: Top center.top-end: Top end.top-right: Top right.bottom-left: Bottom left.bottom-start: Bottom start.bottom: Bottom center.bottom-end: Bottom end.bottom-right: Bottom right.left-start: Left start.left: Left center.left-end: Left end.right-start: Right start.right: Right center.right-end: Right end.
|
open-delay | openDelay | | number | 150 |
The delay (in milliseconds) before the tooltip appears on hover.
|
close-delay | closeDelay | | number | 150 |
The delay (in milliseconds) before the tooltip disappears on hover.
|
headline | headline | | string | - |
Sets the tooltip title. Only applies when variant="rich". Alternatively, use slot="headline".
|
content | content | | string | - |
Sets the tooltip content. Alternatively, use slot="content".
|
trigger | trigger | | 'click' | 'hover' | 'focus' | 'manual' | string | 'hover focus' |
Defines how the tooltip opens. Multiple space-separated values are supported. Possible values:
click: Triggers on click.hover: Triggers on mouse hover.focus: Triggers on focus.manual: Can only be opened and closed programmatically; no other trigger methods can be specified.
|
disabled | disabled | | boolean | false |
Disables the tooltip.
|
open | open | | boolean | false |
Opens the tooltip.
|
| Name |
|---|
open |
Emitted when the tooltip starts to open. Can be prevented with event.preventDefault().
|
opened |
Emitted after the tooltip has opened and the animations are completed.
|
close |
Emitted when the tooltip starts to close. Can be prevented with event.preventDefault().
|
closed |
Emitted after the tooltip has closed and the animations are completed.
|
| Name |
|---|
| (default) |
Target element that triggers the tooltip. Only the first element in the default slot is used as the target.
|
headline |
Tooltip title. Only applies when variant="rich".
|
content |
Tooltip content, which can include HTML. If you only need plain text, you can also use the content attribute.
|
action |
Action button at the bottom of the tooltip. Only available when variant="rich".
|
| Name |
|---|
Container for the tooltip.
|
headline |
Title of the tooltip.
|
content |
Body text of the tooltip.
|
action |
Action button of the tooltip.
|
