The Material Design Lite (MDL) tooltip component is an enhanced version of the standard HTML tooltip as produced by the title attribute. A tooltip consists of text and/or an image that clearly communicates additional information about an element when the user hovers over or, in a touch-based UI, touches the element. The MDL tooltip component is pre-styled (colors, fonts, and other settings are contained in material.min.css) to provide a vivid, attractive visual element that displays related but typically non-essential content, e.g., a definition, clarification, or brief instruction.
Tooltips are a ubiquitous feature of most user interfaces, regardless of a site's content or function. Their design and use is an important factor in the overall user experience. See the tooltip component's Material Design specifications page for details.
1. Code an element, such as a <div>, <p>, or <span>, and style it as desired; this will be the tooltip's target. Include an id attribute and unique value to link the container to its tooltip.
<p id="tt1">HTML</p>
2. Following the target element, code a second element, such as a <div>, <p>, or <span>; this will be the tooltip itself. Include a for (or data-mdl-for) attribute whose value matches that of the target's id.
<p id="tt1">HTML</p> <span for="tt1">HyperText Markup Language</span>
3. Add one or more MDL classes, separated by spaces, to the tooltip element using the class attribute.
<p id="tt1">HTML</p> <span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>
The tooltip component is ready for use.
A target with a simple text tooltip.
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p> <span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>
A target with "rich" (containing HTML markup) tooltip text.
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p> <span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>
A target with a long text tooltip that automatically wraps.
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p> <span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>
A target with tooltip text in a larger font size.
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p> <span class="mdl-tooltip mdl-tooltip--large" for="xml">eXtensible Markup Language</span>
A target with a tooltip containing both an image and text.
<p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p> <span class="mdl-tooltip" for="xml"> <img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
The MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.
| MDL class | Effect | Remarks |
|---|---|---|
mdl-tooltip | Defines a container as an MDL tooltip | Required on tooltip container element |
mdl-tooltip--large | Applies large-font effect | Optional; goes on tooltip container element |
mdl-tooltip--left | Positions the tooltip to the left of the target | Optional; goes on tooltip container element |
mdl-tooltip--right | Positions the tooltip to the right of the target | Optional; goes on tooltip container element |
mdl-tooltip--top | Positions the tooltip to the top of the target | Optional; goes on tooltip container element |
mdl-tooltip--bottom | Positions the tooltip to the bottom of the target | Optional; goes on tooltip container element |