Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(183)

Side by Side Diff: third_party/polymer/v1_0/components-chromium/paper-tooltip/README.md

Issue 1766433002: Roll Polymer to 1.3.1 (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: rebase Created 4 years, 9 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 # paper-tooltip 1
2 <!---
3
4 This README is automatically generated from the comments in these files:
5 paper-tooltip.html
6
7 Edit those files, and our readme bot will duplicate them over here!
8 Edit this file, and the bot will squash your changes :)
9
10 The bot does some handling of markdown. Please file a bug if it does the wrong
11 thing! https://github.com/PolymerLabs/tedium/issues
12
13 -->
14
15 [![Build status](https://travis-ci.org/PolymerElements/paper-tooltip.svg?branch= master)](https://travis-ci.org/PolymerElements/paper-tooltip)
16
17 _[Demo and API docs](https://elements.polymer-project.org/elements/paper-tooltip )_
18
19
20 ##&lt;paper-tooltip&gt;
21
22 Material design: [Tooltips](https://www.google.com/design/spec/components/toolti ps.html)
2 23
3 `<paper-tooltip>` is a label that appears on hover and focus when the user 24 `<paper-tooltip>` is a label that appears on hover and focus when the user
4 hovers over an element with the cursor or with the keyboard. It will be centered 25 hovers over an element with the cursor or with the keyboard. It will be centered
5 to an anchor element specified in the `for` attribute, or, if that doesn't exist , 26 to an anchor element specified in the `for` attribute, or, if that doesn't exist ,
6 centered to the parent node containing it. 27 centered to the parent node containing it.
28
7 Example: 29 Example:
8 30
9 ```html 31 ```html
10 <div style="display:inline-block"> 32 <div style="display:inline-block">
11 <button>Click me!</button> 33 <button>Click me!</button>
12 <paper-tooltip>Tooltip text</paper-tooltip> 34 <paper-tooltip>Tooltip text</paper-tooltip>
13 </div> 35 </div>
14 <div> 36
15 <button id="btn">Click me!</button> 37 <div>
16 <paper-tooltip for="btn">Tooltip text</paper-tooltip> 38 <button id="btn">Click me!</button>
17 </div> 39 <paper-tooltip for="btn">Tooltip text</paper-tooltip>
40 </div>
41 ```
42
43 The tooltip can be positioned on the top|bottom|left|right of the anchor using
44 the `position` attribute. The default position is bottom.
45
46 ```html
47 <paper-tooltip for="btn" position="left">Tooltip text</paper-tooltip>
48 <paper-tooltip for="btn" position="top">Tooltip text</paper-tooltip>
18 ``` 49 ```
19 50
20 ### Styling 51 ### Styling
52
21 The following custom properties and mixins are available for styling: 53 The following custom properties and mixins are available for styling:
22 54
23 Custom property | Description | Default 55 | Custom property | Description | Default |
24 ----------------|-------------|---------- 56 | --- | --- | --- |
25 `--paper-tooltip-background` | The background color of the tooltip | `#616161` 57 | `--paper-tooltip-background` | The background color of the tooltip | `#616161` |
26 `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` 58 | `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9` |
27 `--paper-tooltip-text-color` | The text color of the tooltip | `white` 59 | `--paper-tooltip-text-color` | The text color of the tooltip | `white` |
28 `--paper-tooltip` | Mixin applied to the tooltip | `{}` 60 | `--paper-tooltip` | Mixin applied to the tooltip | `{}` |
61
62
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698