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.

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

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.

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.

Placement

The placement attribute sets the tooltip's position.

Trigger Method

The trigger attribute determines the trigger method for the tooltip.

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.

Disabled State

The disabled attribute disables the tooltip.

API

Properties

AttributePropertyReflectTypeDefault
variantvariant'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.
placementplacement'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-delayopenDelaynumber150

Sets the delay in milliseconds before the tooltip appears on hover.

close-delaycloseDelaynumber150

Sets the delay in milliseconds before the tooltip disappears on hover.

headlineheadlinestring-

Sets the tooltip title. Only applicable when variant="rich". Alternatively, use slot="headline".

contentcontentstring-

Sets the tooltip content. Alternatively, use slot="content".

triggertrigger'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.
disableddisabledbooleanfalse

Disables the tooltip.

openopenbooleanfalse

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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons