1 2<!--- 3 4This README is automatically generated from the comments in these files: 5paper-tooltip.html 6 7Edit those files, and our readme bot will duplicate them over here! 8Edit this file, and the bot will squash your changes :) 9 10The bot does some handling of markdown. Please file a bug if it does the wrong 11thing! 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 22Material design: [Tooltips](https://www.google.com/design/spec/components/tooltips.html) 23 24`<paper-tooltip>` is a label that appears on hover and focus when the user 25hovers over an element with the cursor or with the keyboard. It will be centered 26to an anchor element specified in the `for` attribute, or, if that doesn't exist, 27centered to the parent node containing it. 28 29Example: 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 43The tooltip can be positioned on the top|bottom|left|right of the anchor using 44the `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 53The 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 63
){kind=link}