| 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 |