Tooltip

Tooltips provide supplementary text information for a specific element, enhancing the comprehension of its function or purpose.

Usage

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>

Examples

Plain Text Tooltip

By default, the tooltip displays plain text. The content attribute specifies the tooltip content.

button

<mdui-tooltip content="Plain tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

Alternatively, the content slot can also be used for this purpose.

button

title

content

<mdui-tooltip>
  <mdui-button>button</mdui-button>
  <div slot="content">
    <div style="font-size: 1.4em">title</div>
    <div>content</div>
  </div>
</mdui-tooltip>

Code

Rich Text Tooltip

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 of feature that warrants the user's focus. It supports multiple lines of informational text."
>
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

Alternatively, 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 of 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 of 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>

Code

Placement

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>

Code

Trigger Method

The trigger attribute determines the trigger method for the tooltip.

button

<mdui-tooltip trigger="click" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

Open/Close Delay

When the trigger method is hover, the open-delay and close-delay attributes set the opening and closing delays, respectively. The unit is in milliseconds.

button

<mdui-tooltip open-delay="1000" close-delay="1000" content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

Disabled State

The disabled attribute disables the tooltip.

button

<mdui-tooltip disabled content="tooltip">
  <mdui-button>button</mdui-button>
</mdui-tooltip>

Code

API

Properties

Attribute	Property	Type	Default
`variant`	`variant`	`'plain' \| 'rich'`	`'plain'`
Defines the tooltip shape. Default is `plain`. Possible values: `plain`: For simple single-line text. `rich`: For text including 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`: Position is determined automatically. `top-left`: Top-left corner. `top-start`: Top, left-aligned. `top`: Top, centered. `top-end`: Top, right-aligned. `top-right`: Top-right corner. `bottom-left`: Bottom-left corner. `bottom-start`: Bottom, left-aligned. `bottom`: Bottom, centered. `bottom-end`: Bottom, right-aligned. `bottom-right`: Bottom-right corner. `left-start`: Left, top-aligned. `left`: Left, centered. `left-end`: Left, bottom-aligned. `right-start`: Right, top-aligned. `right`: Right, centered. `right-end`: Right, bottom-aligned.
`open-delay`	`openDelay`	`number`	`150`
Sets the delay in milliseconds before the tooltip appears on hover.
`close-delay`	`closeDelay`	`number`	`150`
Sets the delay in milliseconds before the tooltip disappears on hover.
`headline`	`headline`	`string`	-
Sets the tooltip title. Only applicable 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 the trigger method. Supports multiple values separated by spaces. Possible values: `click`: Triggered on click. `hover`: Triggered on mouse hover. `focus`: Triggered on focus. `manual`: Can only open and close the tooltip programmatically, cannot specify other trigger methods.
`disabled`	`disabled`	`boolean`	`false`
Disables the tooltip.
`open`	`open`	`boolean`	`false`
Opens the tooltip.

Events

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.

Slots

Name
(default)
Target element that triggers the tooltip. Only the first element in the `default` slot is used as the target.
`headline`
Title of the tooltip. Effective only when `variant="rich"`.
`content`
Content of the tooltip, can contain HTML. If only plain text is included, can also use `content` attribute instead.
`action`
Button at the bottom of the tooltip. Effective only when `variant="rich"`.

CSS Parts

Name
`popup`
Container for the tooltip.
`headline`
Title of the tooltip.
`content`
Body text of the tooltip.
`action`
Action button of the tooltip.

CSS Custom Properties

Name
`--shape-corner-plain`
Corner radius of the component when `variant="plain"`. You can use a specific pixel value, but it's recommended to reference design tokens.
`--shape-corner-rich`
Corner radius of the component when `variant="rich"`. You can use a specific pixel value, but it's recommended to reference design tokens.
`--z-index`
The CSS `z-index` value of the component.

Icon

Up Next

Snackbar