third_party/ot-br-posix/repo/third_party/mdl/repo/src/tooltip/README.md

   1 ## Introduction
   2
   3 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.
   4
   5 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](http://www.google.com/design/spec/components/tooltips.html) for details.
   6
   7 ### To include an MDL **tooltip** component:
   8
   9 &nbsp;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.
  10 ```html
  11 <p id="tt1">HTML</p>
  12 ```
  13 &nbsp;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`.
  14 ```html
  15 <p id="tt1">HTML</p>
  16 <span for="tt1">HyperText Markup Language</span>
  17 ```
  18 &nbsp;3. Add one or more MDL classes, separated by spaces, to the tooltip element using the `class` attribute.
  19 ```html
  20 <p id="tt1">HTML</p>
  21 <span for="tt1" class="mdl-tooltip">HyperText Markup Language</span>
  22 ```
  23
  24 The tooltip component is ready for use.
  25
  26 #### Examples
  27
  28 A target with a simple text tooltip.
  29 ```html
  30 <p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
  31 <span class="mdl-tooltip" for="xml">eXtensible Markup Language</span>
  32 ```
  33
  34 A target with "rich" (containing HTML markup) tooltip text.
  35 ```html
  36 <p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
  37 <span class="mdl-tooltip" for="xml">e<b>X</b>tensible <b>M</b>arkup <b>L</b>anguage</span>
  38 ```
  39
  40 A target with a long text tooltip that automatically wraps.
  41 ```html
  42 <p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
  43 <span class="mdl-tooltip" for="xml">XML is an acronym for eXtensible Markup Language</span>
  44 ```
  45
  46 A target with tooltip text in a larger font size.
  47 ```html
  48 <p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
  49 <span class="mdl-tooltip mdl-tooltip--large" for="xml">eXtensible Markup Language</span>
  50 ```
  51
  52 A target with a tooltip containing both an image and text.
  53 ```html
  54 <p>HTML is related to but different from <span id="xml"><i>XML</i></span>.</p>
  55 <span class="mdl-tooltip" for="xml">
  56 <img src="xml-logo-small.png" width="20" height="10"> eXtensible Markup Language</span>
  57 ```
  58
  59 ## Configuration options
  60
  61 The MDL CSS classes apply various predefined visual enhancements to the tooltip. The table below lists the available classes and their effects.
  62
  63 | MDL class | Effect | Remarks |
  64 |-----------|--------|---------|
  65 | `mdl-tooltip` | Defines a container as an MDL tooltip | Required on tooltip container element |
  66 | `mdl-tooltip--large` | Applies large-font effect | Optional; goes on tooltip container element |
  67 | `mdl-tooltip--left` | Positions the tooltip to the left of the target | Optional; goes on tooltip container element |
  68 | `mdl-tooltip--right` | Positions the tooltip to the right of the target | Optional; goes on tooltip container element |
  69 | `mdl-tooltip--top` | Positions the tooltip to the top of the target | Optional; goes on tooltip container element |
  70 | `mdl-tooltip--bottom` | Positions the tooltip to the bottom of the target | Optional; goes on tooltip container element |