paper-tooltip - Vaadin Add-on Directory
A Material Design tooltip
[](https://www.npmjs.com/package/@polymer/paper-tooltip)
[](https://travis-ci.org/PolymerElements/paper-tooltip)
[](https://webcomponents.org/element/@polymer/paper-tooltip)
## <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.
See: [Documentation](https://www.webcomponents.org/element/@polymer/paper-tooltip),
[Demo](https://www.webcomponents.org/element/@polymer/paper-tooltip/demo/demo/index.html).
## Usage
### Installation
```
npm install --save @polymer/paper-tooltip
```
### In an html file
```html
Tooltip text
Tooltip text
```
### In a Polymer 3 element
```js
import {PolymerElement, html} from '@polymer/polymer';
import '@polymer/paper-tooltip/paper-tooltip.js';
class SampleElement extends PolymerElement {
static get template() {
return html`
Tooltip text
Tooltip text
`;
}
}
customElements.define('sample-element', SampleElement);
```
## Contributing
If you want to send a PR to this element, here are
the instructions for running the tests and demo locally:
### Installation
```sh
git clone https://github.com/PolymerElements/paper-tooltip
cd paper-tooltip
npm install
npm install -g polymer-cli
```
### Running the demo locally
```sh
polymer serve --npm
open http://127.0.0.1:/demo/
```
### Running the tests
```sh
polymer test --npm
```