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

Side by Side Diff: polymer_1.0.4/bower_components/paper-tooltip/paper-tooltip.html

Issue 1264073002: Update polymer 1.0 install to pick up newly added elements. (Closed) Base URL: https://chromium.googlesource.com/infra/third_party/npm_modules.git@master
Patch Set: Update bower file to match actual versions. Created 5 years, 4 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
(Empty)
1 <!--
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
3 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
6 Code distributed by Google as part of the polymer project is also
7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
8 -->
9
10
11 <link rel="import" href="../polymer/polymer.html">
12 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
13 <link rel="import" href="../neon-animation/animations/fade-in-animation.html">
14 <link rel="import" href="../neon-animation/animations/fade-out-animation.html">
15 <!--
16
17 `<paper-tooltip>` is a label that appears on hover and focus when the user
18 hovers over an element with the cursor or with the keyboard. It will be centered
19 to an anchor element specified in the `for` attribute, or, if that doesn't exist ,
20 centered to the parent node containing it.
21
22 Example:
23
24 <div style="display:inline-block">
25 <button>Click me!</button>
26 <paper-tooltip>Tooltip text</paper-tooltip>
27 </div>
28
29 <div>
30 <button id="btn">Click me!</button>
31 <paper-tooltip for="btn">Tooltip text</paper-tooltip>
32 </div>
33
34 ### Styling
35
36 The following custom properties and mixins are available for styling:
37
38 Custom property | Description | Default
39 ----------------|-------------|----------
40 `--paper-tooltip-background` | The background color of the tooltip | `#616161`
41 `--paper-tooltip-opacity` | The opacity of the tooltip | `0.9`
42 `--paper-tooltip-text-color` | The text color of the tooltip | `white`
43 `--paper-tooltip` | Mixin applied to the tooltip | `{}`
44
45 @group Paper Elements
46 @element paper-tooltip
47 @demo demo/index.html
48 -->
49
50 <dom-module id="paper-tooltip">
51 <style>
52 :host {
53 display: block;
54 position: absolute;
55 outline: none;
56 }
57
58 #tooltip {
59 outline: none;
60 @apply(--paper-font-common-base);
61 font-size: 10px;
62
63 background-color: var(--paper-tooltip-background, #616161);
64 opacity: var(--paper-tooltip-opacity, 0.9);
65 color: var(--paper-tooltip-text-color, white);
66
67 padding: 8px;
68 border-radius: 2px;
69 z-index: 1002;
70
71 @apply(--paper-tooltip);
72 }
73 </style>
74 <template>
75 <div id="tooltip" hidden>
76 <content></content>
77 </div>
78 </template>
79 <script>
80 Polymer({
81 is: 'paper-tooltip',
82
83 hostAttributes: {
84 role: 'tooltip',
85 tabindex: -1
86 },
87
88 behaviors: [
89 Polymer.NeonAnimationRunnerBehavior
90 ],
91
92 properties: {
93 /**
94 * The id of the element that the tooltip is anchored to. This element
95 * must be a sibling of the tooltip.
96 */
97 for: {
98 type: String
99 },
100
101 /**
102 * The spacing between the top of the tooltip and the element it is
103 * anchored to.
104 */
105 marginTop: {
106 type: Number,
107 value: 14
108 },
109
110 animationConfig: {
111 type: Object,
112 value: function() {
113 return {
114 'entry': [{
115 name: 'fade-in-animation',
116 node: this,
117 timing: {delay: 500}
118 }],
119 'exit': [{
120 name: 'fade-out-animation',
121 node: this
122 }]
123 }
124 }
125 },
126
127 _showing: {
128 type: Boolean,
129 value: false
130 }
131 },
132
133 listeners: {
134 'neon-animation-finish': '_onAnimationFinish'
135 },
136
137 /**
138 * Returns the target element that this tooltip is anchored to. It is
139 * either the element given by the `for` attribute, or the immediate paren t
140 * of the tooltip.
141 */
142 get target () {
143 var ownerRoot = Polymer.dom(this).getOwnerRoot();
144 var parentNode = Polymer.dom(this).parentNode;
145 var target;
146
147 if (this.for) {
148 target = parentNode.querySelector('#' + this.for);
149 } else if (parentNode.nodeType == 11) { // DOCUMENT_FRAGMENT_NODE
150 target = ownerRoot.host;
151 } else {
152 target = parentNode;
153 }
154
155 return target;
156 },
157
158 attached: function() {
159 this._target = this.target;
160
161 this.listen(this._target, 'mouseenter', 'show');
162 this.listen(this._target, 'focus', 'show');
163 this.listen(this._target, 'mouseleave', 'hide');
164 this.listen(this._target, 'blur', 'hide');
165 },
166
167 detached: function() {
168 if (this._target) {
169 this.unlisten(this._target, 'mouseenter', 'show');
170 this.unlisten(this._target, 'focus', 'show');
171 this.unlisten(this._target, 'mouseleave', 'hide');
172 this.unlisten(this._target, 'blur', 'hide');
173 }
174 },
175
176 show: function() {
177 this.$.tooltip.hidden = false;
178 this._setPosition();
179 this._showing = true;
180
181 this.playAnimation('entry');
182 },
183
184 hide: function() {
185 this._showing = false;
186 this.playAnimation('exit');
187 },
188
189 _setPosition: function() {
190 if (!this._target)
191 return;
192
193 var parentRect = this.offsetParent.getBoundingClientRect();
194 var targetRect = this._target.getBoundingClientRect();
195 var thisRect = this.getBoundingClientRect();
196
197 var centerOffset = (targetRect.width - thisRect.width) / 2;
198
199 this.style.left = targetRect.left - parentRect.left + centerOffset + 'px ';
200 this.style.top = targetRect.top - parentRect.top + targetRect.height + t his.marginTop + 'px';
201 },
202
203 _onAnimationFinish: function() {
204 if (!this._showing) {
205 this.$.tooltip.hidden = true;
206 }
207 },
208 })
209 </script>
210 </dom-module>
OLDNEW
« no previous file with comments | « polymer_1.0.4/bower_components/paper-tooltip/index.html ('k') | polymer_1.0.4/bower_components/paper-tooltip/test/basic.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698