OLD | NEW |
1 <!-- | 1 <!-- |
2 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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 | 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 | 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 | 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 | 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 | 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
8 --> | 8 --> |
9 | 9 |
10 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../neon-animation/neon-animation-runner-behavior.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"> | 13 <link rel="import" href="../neon-animation/animations/fade-in-animation.html"> |
14 <link rel="import" href="../neon-animation/animations/fade-out-animation.html"> | 14 <link rel="import" href="../neon-animation/animations/fade-out-animation.html"> |
| 15 |
15 <!-- | 16 <!-- |
| 17 Material design: [Tooltips](https://www.google.com/design/spec/components/toolti
ps.html) |
16 | 18 |
17 `<paper-tooltip>` is a label that appears on hover and focus when the user | 19 `<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 | 20 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
, | 21 to an anchor element specified in the `for` attribute, or, if that doesn't exist
, |
20 centered to the parent node containing it. | 22 centered to the parent node containing it. |
21 | 23 |
22 Example: | 24 Example: |
23 | 25 |
24 <div style="display:inline-block"> | 26 <div style="display:inline-block"> |
25 <button>Click me!</button> | 27 <button>Click me!</button> |
(...skipping 28 matching lines...) Expand all Loading... |
54 --> | 56 --> |
55 | 57 |
56 <dom-module id="paper-tooltip"> | 58 <dom-module id="paper-tooltip"> |
57 <template> | 59 <template> |
58 <style> | 60 <style> |
59 :host { | 61 :host { |
60 display: block; | 62 display: block; |
61 position: absolute; | 63 position: absolute; |
62 outline: none; | 64 outline: none; |
63 z-index: 1002; | 65 z-index: 1002; |
| 66 -moz-user-select: none; |
| 67 -ms-user-select: none; |
| 68 -webkit-user-select: none; |
| 69 user-select: none; |
| 70 cursor: default; |
64 } | 71 } |
65 | 72 |
66 #tooltip { | 73 #tooltip { |
67 display: block; | 74 display: block; |
68 outline: none; | 75 outline: none; |
69 @apply(--paper-font-common-base); | 76 @apply(--paper-font-common-base); |
70 font-size: 10px; | 77 font-size: 10px; |
| 78 line-height: 1; |
71 | 79 |
72 background-color: var(--paper-tooltip-background, #616161); | 80 background-color: var(--paper-tooltip-background, #616161); |
73 opacity: var(--paper-tooltip-opacity, 0.9); | 81 opacity: var(--paper-tooltip-opacity, 0.9); |
74 color: var(--paper-tooltip-text-color, white); | 82 color: var(--paper-tooltip-text-color, white); |
75 | 83 |
76 padding: 8px; | 84 padding: 8px; |
77 border-radius: 2px; | 85 border-radius: 2px; |
78 | 86 |
79 @apply(--paper-tooltip); | 87 @apply(--paper-tooltip); |
80 } | 88 } |
(...skipping 61 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
142 * This property is deprecated, but left over so that it doesn't | 150 * This property is deprecated, but left over so that it doesn't |
143 * break exiting code. Please use `offset` instead. If both `offset` and | 151 * break exiting code. Please use `offset` instead. If both `offset` and |
144 * `marginTop` are provided, `marginTop` will be ignored. | 152 * `marginTop` are provided, `marginTop` will be ignored. |
145 * @deprecated since version 1.0.3 | 153 * @deprecated since version 1.0.3 |
146 */ | 154 */ |
147 marginTop: { | 155 marginTop: { |
148 type: Number, | 156 type: Number, |
149 value: 14 | 157 value: 14 |
150 }, | 158 }, |
151 | 159 |
| 160 /** |
| 161 * The delay that will be applied before the `entry` animation is |
| 162 * played when showing the tooltip. |
| 163 */ |
| 164 animationDelay: { |
| 165 type: Number, |
| 166 value: 500 |
| 167 }, |
| 168 |
| 169 /** |
| 170 * The entry and exit animations that will be played when showing and |
| 171 * hiding the tooltip. If you want to override this, you must ensure |
| 172 * that your animationConfig has the exact format below. |
| 173 */ |
152 animationConfig: { | 174 animationConfig: { |
153 type: Object, | 175 type: Object, |
154 value: function() { | 176 value: function() { |
155 return { | 177 return { |
156 'entry': [{ | 178 'entry': [{ |
157 name: 'fade-in-animation', | 179 name: 'fade-in-animation', |
158 node: this, | 180 node: this, |
159 timing: {delay: 500} | 181 timing: {delay: 0} |
160 }], | 182 }], |
161 'exit': [{ | 183 'exit': [{ |
162 name: 'fade-out-animation', | 184 name: 'fade-out-animation', |
163 node: this | 185 node: this |
164 }] | 186 }] |
165 } | 187 } |
166 } | 188 } |
167 }, | 189 }, |
168 | 190 |
169 _showing: { | 191 _showing: { |
170 type: Boolean, | 192 type: Boolean, |
171 value: false | 193 value: false |
172 } | 194 } |
173 }, | 195 }, |
174 | 196 |
175 listeners: { | 197 listeners: { |
176 'neon-animation-finish': '_onAnimationFinish' | 198 'neon-animation-finish': '_onAnimationFinish', |
| 199 'mouseenter': 'hide' |
177 }, | 200 }, |
178 | 201 |
179 /** | 202 /** |
180 * Returns the target element that this tooltip is anchored to. It is | 203 * Returns the target element that this tooltip is anchored to. It is |
181 * either the element given by the `for` attribute, or the immediate paren
t | 204 * either the element given by the `for` attribute, or the immediate paren
t |
182 * of the tooltip. | 205 * of the tooltip. |
183 */ | 206 */ |
184 get target () { | 207 get target () { |
185 var parentNode = Polymer.dom(this).parentNode; | 208 var parentNode = Polymer.dom(this).parentNode; |
186 // If the parentNode is a document fragment, then we need to use the hos
t. | 209 // If the parentNode is a document fragment, then we need to use the hos
t. |
(...skipping 10 matching lines...) Expand all Loading... |
197 return target; | 220 return target; |
198 }, | 221 }, |
199 | 222 |
200 attached: function() { | 223 attached: function() { |
201 this._target = this.target; | 224 this._target = this.target; |
202 | 225 |
203 this.listen(this._target, 'mouseenter', 'show'); | 226 this.listen(this._target, 'mouseenter', 'show'); |
204 this.listen(this._target, 'focus', 'show'); | 227 this.listen(this._target, 'focus', 'show'); |
205 this.listen(this._target, 'mouseleave', 'hide'); | 228 this.listen(this._target, 'mouseleave', 'hide'); |
206 this.listen(this._target, 'blur', 'hide'); | 229 this.listen(this._target, 'blur', 'hide'); |
| 230 this.listen(this._target, 'tap', 'hide'); |
207 }, | 231 }, |
208 | 232 |
209 detached: function() { | 233 detached: function() { |
210 if (this._target) { | 234 if (this._target) { |
211 this.unlisten(this._target, 'mouseenter', 'show'); | 235 this.unlisten(this._target, 'mouseenter', 'show'); |
212 this.unlisten(this._target, 'focus', 'show'); | 236 this.unlisten(this._target, 'focus', 'show'); |
213 this.unlisten(this._target, 'mouseleave', 'hide'); | 237 this.unlisten(this._target, 'mouseleave', 'hide'); |
214 this.unlisten(this._target, 'blur', 'hide'); | 238 this.unlisten(this._target, 'blur', 'hide'); |
| 239 this.unlisten(this._target, 'tap', 'hide'); |
215 } | 240 } |
216 }, | 241 }, |
217 | 242 |
218 show: function() { | 243 show: function() { |
| 244 // If the tooltip is already showing, there's nothing to do. |
219 if (this._showing) | 245 if (this._showing) |
220 return; | 246 return; |
221 | 247 |
222 if (Polymer.dom(this).textContent.trim() === '') | 248 if (Polymer.dom(this).textContent.trim() === '') |
223 return; | 249 return; |
224 | 250 |
| 251 |
225 this.cancelAnimation(); | 252 this.cancelAnimation(); |
226 | 253 this._showing = true; |
227 this.toggleClass('hidden', false, this.$.tooltip); | 254 this.toggleClass('hidden', false, this.$.tooltip); |
228 this.updatePosition(); | 255 this.updatePosition(); |
229 this._showing = true; | |
230 | 256 |
| 257 this.animationConfig.entry[0].timing.delay = this.animationDelay; |
| 258 this._animationPlaying = true; |
231 this.playAnimation('entry'); | 259 this.playAnimation('entry'); |
232 }, | 260 }, |
233 | 261 |
234 hide: function() { | 262 hide: function() { |
235 if (!this._showing) | 263 // If the tooltip is already hidden, there's nothing to do. |
| 264 if (!this._showing) { |
236 return; | 265 return; |
| 266 } |
| 267 |
| 268 // If the entry animation is still playing, don't try to play the exit |
| 269 // animation since this will reset the opacity to 1. Just end the animat
ion. |
| 270 if (this._animationPlaying) { |
| 271 this.cancelAnimation(); |
| 272 this._showing = false; |
| 273 this._onAnimationFinish(); |
| 274 return; |
| 275 } |
237 | 276 |
238 this._showing = false; | 277 this._showing = false; |
| 278 this._animationPlaying = true; |
239 this.playAnimation('exit'); | 279 this.playAnimation('exit'); |
240 }, | 280 }, |
241 | 281 |
242 _forChanged: function() { | 282 _forChanged: function() { |
243 this._target = this.target; | 283 this._target = this.target; |
244 }, | 284 }, |
245 | 285 |
246 updatePosition: function() { | 286 updatePosition: function() { |
247 if (!this._target) | 287 if (!this._target) |
248 return; | 288 return; |
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
303 this.style.bottom = 'auto'; | 343 this.style.bottom = 'auto'; |
304 } | 344 } |
305 } else { | 345 } else { |
306 this.style.left = tooltipLeft + 'px'; | 346 this.style.left = tooltipLeft + 'px'; |
307 this.style.top = tooltipTop + 'px'; | 347 this.style.top = tooltipTop + 'px'; |
308 } | 348 } |
309 | 349 |
310 }, | 350 }, |
311 | 351 |
312 _onAnimationFinish: function() { | 352 _onAnimationFinish: function() { |
| 353 this._animationPlaying = false; |
313 if (!this._showing) { | 354 if (!this._showing) { |
314 this.toggleClass('hidden', true, this.$.tooltip); | 355 this.toggleClass('hidden', true, this.$.tooltip); |
315 } | 356 } |
316 }, | 357 }, |
317 }); | 358 }); |
318 </script> | 359 </script> |
319 </dom-module> | 360 </dom-module> |
OLD | NEW |