diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-tooltip/README.md')
-rw-r--r-- | catapult/third_party/polymer/components/paper-tooltip/README.md | 62 |
1 files changed, 62 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-tooltip/README.md b/catapult/third_party/polymer/components/paper-tooltip/README.md new file mode 100644 index 00000000..b20a34b5 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-tooltip/README.md @@ -0,0 +1,62 @@ + +<!--- + +This README is automatically generated from the comments in these files: +paper-tooltip.html + +Edit those files, and our readme bot will duplicate them over here! +Edit this file, and the bot will squash your changes :) + +The bot does some handling of markdown. Please file a bug if it does the wrong +thing! https://github.com/PolymerLabs/tedium/issues + +--> + +[![Build status](https://travis-ci.org/PolymerElements/paper-tooltip.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-tooltip) + +_[Demo and API docs](https://elements.polymer-project.org/elements/paper-tooltip)_ + + +##<paper-tooltip> + +Material design: [Tooltips](https://www.google.com/design/spec/components/tooltips.html) + +`<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: + +```html +<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. + +```html +<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: + +| 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 | `{}` | + + |