OLD | NEW |
| (Empty) |
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) | |
23 | |
24 `<paper-tooltip>` is a label that appears on hover and focus when the user | |
25 hovers over an element with the cursor or with the keyboard. It will be centered | |
26 to an anchor element specified in the `for` attribute, or, if that doesn't exist
, | |
27 centered to the parent node containing it. | |
28 | |
29 Example: | |
30 | |
31 ```html | |
32 <div style="display:inline-block"> | |
33 <button>Click me!</button> | |
34 <paper-tooltip>Tooltip text</paper-tooltip> | |
35 </div> | |
36 | |
37 <div> | |
38 <button id="btn">Click me!</button> | |
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> | |
49 ``` | |
50 | |
51 ### Styling | |
52 | |
53 The following custom properties and mixins are available for styling: | |
54 | |
55 | Custom property | Description | Default | | |
56 | --- | --- | --- | | |
57 | `--paper-tooltip-background` | The background color of the tooltip | `#616161`
| | |
58 | `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` | | |
59 | `--paper-tooltip-text-color` | The text color of the tooltip | `white` | | |
60 | `--paper-tooltip` | Mixin applied to the tooltip | `{}` | | |
61 | |
62 | |
OLD | NEW |