Name: paper-tooltip
Owner: PolymerElements
Description: A Material Design tooltip
Created: 2015-06-18 17:10:04.0
Updated: 2018-05-14 18:52:08.0
Pushed: 2018-05-23 02:39:41.0
Homepage: https://elements.polymer-project.org/elements/paper-tooltip?view=demo:demo/index.html
Size: 591
Language: HTML
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
Material design: Tooltips
<paper-tooltip> is a label that appears on hover and focus when the user
hovers over an element with the cursor or with the keyboard. It will be centered
to an anchor element specified in the for attribute, or, if that doesn't exist,
centered to the parent node containing it.
Example:
style="display:inline-block">
utton>Click me!</button>
aper-tooltip>Tooltip text</paper-tooltip>
v>
>
utton id="btn">Click me!</button>
aper-tooltip for="btn">Tooltip text</paper-tooltip>
v>
The tooltip can be positioned on the top|bottom|left|right of the anchor using
the position attribute. The default position is bottom.
er-tooltip for="btn" position="left">Tooltip text</paper-tooltip>
er-tooltip for="btn" position="top">Tooltip text</paper-tooltip>
The following custom properties and mixins are available for styling:
| Custom property | Description | Default |
| — | — | — |
| --paper-tooltip-background | The background color of the tooltip | #616161 |
| --paper-tooltip-opacity | The opacity of the tooltip | 0.9 |
| --paper-tooltip-text-color | The text color of the tooltip | white |
| --paper-tooltip | Mixin applied to the tooltip | {} |
| --paper-tooltip-delay-in | Delay before tooltip starts to fade in | 500 |
| --paper-tooltip-delay-out | Delay before tooltip starts to fade out | 0 |
| --paper-tooltip-duration-in | Timing for Animation when showing tooltip | 500 |
| --paper-tooltip-duration-out | Timining for Animation when hiding tooltip | 0 |
| --paper-tooltip-animation | Mixin applied to the tooltip animation | {} |