| OLD | NEW |
| 1 # paper-tooltip | 1 # paper-tooltip |
| 2 | 2 |
| 3 `<paper-tooltip>` is a Material Design label that appears when the user hovers | 3 `<paper-tooltip>` is a label that appears on hover and focus when the user |
| 4 over an element with the cursor, or focuses the element with the keyboard. | 4 hovers over an element with the cursor or with the keyboard. It will be centered |
| 5 to an anchor element specified in the `for` attribute, or, if that doesn't exist
, |
| 6 centered to the parent node containing it. |
| 7 Example: |
| 8 |
| 9 ```html |
| 10 <div style="display:inline-block"> |
| 11 <button>Click me!</button> |
| 12 <paper-tooltip>Tooltip text</paper-tooltip> |
| 13 </div> |
| 14 <div> |
| 15 <button id="btn">Click me!</button> |
| 16 <paper-tooltip for="btn">Tooltip text</paper-tooltip> |
| 17 </div> |
| 18 ``` |
| 19 |
| 20 ### Styling |
| 21 The following custom properties and mixins are available for styling: |
| 22 |
| 23 Custom property | Description | Default |
| 24 ----------------|-------------|---------- |
| 25 `--paper-tooltip-background` | The background color of the tooltip | `#616161` |
| 26 `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` |
| 27 `--paper-tooltip-text-color` | The text color of the tooltip | `white` |
| 28 `--paper-tooltip` | Mixin applied to the tooltip | `{}` |
| OLD | NEW |