Material Design Lite
Banner
Bottom sheet
Date picker
Expansion Panel
Image list
Grid list
Menu
Ripple
Select
Stepper
Sort header
Tree
View on Material.io

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

TokenDescriptionDefault
--md-sys-comp-tooltip-background-colorThe background color of the container
--md-sys-comp-tooltip-colorThe foreground color of the container

Resources

Playground

See the Pen Tooltip by Rody Davis (@kherrick ) on CodePen.