@mstyk/paper-tooltip v1.1.4

Demo and API docs

##<paper-tooltip>

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:

<div style="display:inline-block">
  <button>Click me!</button>
  <paper-tooltip>Tooltip text</paper-tooltip>
</div>

<div>
  <button id="btn">Click me!</button>
  <paper-tooltip for="btn">Tooltip text</paper-tooltip>
</div>

The tooltip can be positioned on the top|bottom|left|right of the anchor using the position attribute. The default position is bottom.

<paper-tooltip for="btn" position="left">Tooltip text</paper-tooltip>
<paper-tooltip for="btn" position="top">Tooltip text</paper-tooltip>

Styling

The following custom properties and mixins are available for styling: