Preview
Installation
To import just the component styles, copy the following into your project’s styles.css file:
/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/tooltip/style.css');
Usage
Start with a div element and add the tooltip class name and data-tooltip attribute:
<a class="tooltip" href="#" data-tooltip="Tooltip contents here!">Hover Me!</a>
It is also to use the aria-label attribute:
<a class="tooltip" href="#" aria-label="Tooltip contents here!">Hover Me!</a>
Design Tokens
Token | Description | Default |
---|---|---|
--md-sys-comp-tooltip-background-color | The background color of the container | |
--md-sys-comp-tooltip-color | The foreground color of the container |