near_me
Getting Started
keyboard_arrow_downlayers
Style
keyboard_arrow_downwidgets
Components
keyboard_arrow_downlocal_mall
Resources
keyboard_arrow_downThe new mdui 2 based on Material Design 3 and Web Components is now available. Check out the mdui 2 documentation.
Tooltip
Tooltips are generally used to provide descriptions for icons. Their content is typically plain text, without images or formatted text.
Usage
- Call via Attributes
- Call via JavaScript
Related Reading
Usage
Call via Attributes
Using this method eliminates the need to write JavaScript code. Simply add the mdui-tooltip="options" attribute to an element to activate the plugin.
Example
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Print'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Print', position: 'top'}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>
<button class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: 'Print', delay: 1000}">
<i class="mdui-icon material-icons">local_printshop</i>
</button>Call via JavaScript
Instantiate the component:
// selector is the CSS selector or DOM element
// options are the configuration parameters; see the parameter list below
var inst = new mdui.Tooltip(selector, options);Param
| Param Name | Type | Default | Description |
|---|---|---|---|
position | string | auto | Position of the tooltip. Values include auto, bottom, top, left, right.When set to auto, the position is automatically determined. Default is bottom. Priority: bottom > top > left > right |
delay | int | 0 | Trigger delay in milliseconds. |
content | string | The content of the Tooltip. |
Method
| Method Name | Description |
|---|---|
open() | Open the Tooltip Configuration parameters can be passed to modify content each time it opens, such as |
close() | Close the Tooltip |
toggle() | Toggle the Tooltip state |
getState() | Returns the Tooltip state. Includes four states (opening, opened, closing, closed). |
Event
| Event Name | Description | Params |
|---|---|---|
open.mdui.tooltip | Triggered when the opening animation starts. | event._detail.inst: Instance |
opened.mdui.tooltip | Triggered when the opening animation ends. | |
close.mdui.tooltip | Triggered when the closing animation starts. | |
closed.mdui.tooltip | Triggered when the closing animation ends. |