| OLD | NEW |
| 1 # paper-tooltip | 1 |
| 2 <!--- |
| 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-tooltip.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 The bot does some handling of markdown. Please file a bug if it does the wrong |
| 11 thing! https://github.com/PolymerLabs/tedium/issues |
| 12 |
| 13 --> |
| 14 |
| 15 [](https://travis-ci.org/PolymerElements/paper-tooltip) |
| 16 |
| 17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-tooltip
)_ |
| 18 |
| 19 |
| 20 ##<paper-tooltip> |
| 21 |
| 22 Material design: [Tooltips](https://www.google.com/design/spec/components/toolti
ps.html) |
| 2 | 23 |
| 3 `<paper-tooltip>` is a label that appears on hover and focus when the user | 24 `<paper-tooltip>` is a label that appears on hover and focus when the user |
| 4 hovers over an element with the cursor or with the keyboard. It will be centered | 25 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
, | 26 to an anchor element specified in the `for` attribute, or, if that doesn't exist
, |
| 6 centered to the parent node containing it. | 27 centered to the parent node containing it. |
| 28 |
| 7 Example: | 29 Example: |
| 8 | 30 |
| 9 ```html | 31 ```html |
| 10 <div style="display:inline-block"> | 32 <div style="display:inline-block"> |
| 11 <button>Click me!</button> | 33 <button>Click me!</button> |
| 12 <paper-tooltip>Tooltip text</paper-tooltip> | 34 <paper-tooltip>Tooltip text</paper-tooltip> |
| 13 </div> | 35 </div> |
| 14 <div> | 36 |
| 15 <button id="btn">Click me!</button> | 37 <div> |
| 16 <paper-tooltip for="btn">Tooltip text</paper-tooltip> | 38 <button id="btn">Click me!</button> |
| 17 </div> | 39 <paper-tooltip for="btn">Tooltip text</paper-tooltip> |
| 40 </div> |
| 41 ``` |
| 42 |
| 43 The tooltip can be positioned on the top|bottom|left|right of the anchor using |
| 44 the `position` attribute. The default position is bottom. |
| 45 |
| 46 ```html |
| 47 <paper-tooltip for="btn" position="left">Tooltip text</paper-tooltip> |
| 48 <paper-tooltip for="btn" position="top">Tooltip text</paper-tooltip> |
| 18 ``` | 49 ``` |
| 19 | 50 |
| 20 ### Styling | 51 ### Styling |
| 52 |
| 21 The following custom properties and mixins are available for styling: | 53 The following custom properties and mixins are available for styling: |
| 22 | 54 |
| 23 Custom property | Description | Default | 55 | Custom property | Description | Default | |
| 24 ----------------|-------------|---------- | 56 | --- | --- | --- | |
| 25 `--paper-tooltip-background` | The background color of the tooltip | `#616161` | 57 | `--paper-tooltip-background` | The background color of the tooltip | `#616161`
| |
| 26 `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` | 58 | `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` | |
| 27 `--paper-tooltip-text-color` | The text color of the tooltip | `white` | 59 | `--paper-tooltip-text-color` | The text color of the tooltip | `white` | |
| 28 `--paper-tooltip` | Mixin applied to the tooltip | `{}` | 60 | `--paper-tooltip` | Mixin applied to the tooltip | `{}` | |
| 61 |
| 62 |
| OLD | NEW |