menu MDUI Documentation
color_lens
near_me
Start
keyboard_arrow_down
Instalation Compatibility JavaScript tool library JavaScript global methods
layers
Style
keyboard_arrow_down
Colors and themes Font Grid layout Typography Icon Media Helper class Shadow
widgets
Component
keyboard_arrow_down
Ripple animation effect Button Floating operation button Drop-down selection Divider Expandable panel Text box Select control Slider List List control Grid list Tab Tab toolbar App bar Navigation drawer Bottom navigation bar Card Scrap of paper Tooltip Snackbar Table Dialog box Menu Progress indicator
view_carousel
JavaScript Plug-in
keyboard_arrow_down
Collapse Headroom
local_mall
Resources
keyboard_arrow_down
Material icon

tooltip

Tooltip is generally used to add instructions to icons, and its content is generally plain text, without pictures and formatted text.

Call method

  1. Called by custom attributes
  2. Call via JavaScript

Related Reading

Material Design Guidelines: Components-Tooltips

Call method

Called by custom attributes

There is no need to write JavaScript code in this way. Just add on the element mdui-tooltip="options" Properties to activate the plug-in.

codeplay_arrow
Example
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印'}"><i class="mdui-icon material-icons">local_printshop</i></button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印', position: 'top'}"><i class="mdui-icon material-icons">local_printshop</i></button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '打印', delay: 1000}"><i class="mdui-icon material-icons">local_printshop</i></button>

Call via JavaScript

Instantiate components:

// selector is a CSS selector or DOM element
// options are configuration parameters, see the parameter list below
var inst = new mdui.Tooltip(selector, options);
run

parameter

parameter name Types of Defaults description
position string auto The location of the Tooltip. The range of values ​​includes auto、bottom、top、left、right。
for auto When, it will automatically determine the location. The default is below. Priority is bottom > top > left > right
delay int 0 Delay trigger, in milliseconds.
content string The content of the Tooltip.

method

Method name description
open() Open Tooltip
close() Close Tooltip
toggle() Toggle the state of Tooltip
getState() Returns the status of Tooltip. Contains four states（opening、opened、closing、closed）。

event

event description parameter
open.mdui.tooltip The event is triggered when the opening animation starts. event._detail.inst: Examples
opened.mdui.tooltip The event is triggered when the opening animation ends.
close.mdui.tooltip The event is triggered when the closing animation starts.
closed.mdui.tooltip When the closing animation ends, the event is triggered.
arrow_back Previous
Scrap of paper
arrow_forward Next
Snackbar
Set document theme

Theme color

Main color

Accent color