Material design tooltip popup for content
Last updated 2 years ago by paulvarache .
BSD-3-Clause · Repository · Original npm · Tarball · package.json
$ cnpm install @kano/kwc-paper-tooltip 
SYNC missed versions from official npm registry.

Build status

Demo and API docs


Material design: Tooltips

<kwc-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.


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

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

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

<kwc-paper-tooltip for="btn" position="left">Tooltip text</kwc-paper-tooltip>
<kwc-paper-tooltip for="btn" position="top">Tooltip text</kwc-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 {}

Current Tags

  • 3.0.0-beta.2                                ...           latest (2 years ago)

2 Versions

  • 3.0.0-beta.2                                ...           2 years ago
  • 3.0.0-beta.1                                ...           2 years ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |