| OLD | NEW |
| 1 Polymer({ | 1 Polymer({ |
| 2 is: 'paper-tooltip', | 2 is: 'paper-tooltip', |
| 3 | 3 |
| 4 hostAttributes: { | 4 hostAttributes: { |
| 5 role: 'tooltip', | 5 role: 'tooltip', |
| 6 tabindex: -1 | 6 tabindex: -1 |
| 7 }, | 7 }, |
| 8 | 8 |
| 9 behaviors: [ | 9 behaviors: [ |
| 10 Polymer.NeonAnimationRunnerBehavior | 10 Polymer.NeonAnimationRunnerBehavior |
| 11 ], | 11 ], |
| 12 | 12 |
| 13 properties: { | 13 properties: { |
| 14 /** | 14 /** |
| 15 * The id of the element that the tooltip is anchored to. This element | 15 * The id of the element that the tooltip is anchored to. This element |
| 16 * must be a sibling of the tooltip. | 16 * must be a sibling of the tooltip. |
| 17 */ | 17 */ |
| 18 for: { | 18 for: { |
| 19 type: String, | 19 type: String, |
| 20 observer: '_forChanged' | 20 observer: '_forChanged' |
| 21 }, | 21 }, |
| 22 | 22 |
| 23 /** | 23 /** |
| 24 * Set this to true if you want to manually control when the tooltip |
| 25 * is shown or hidden. |
| 26 */ |
| 27 manualMode: { |
| 28 type: Boolean, |
| 29 value: false |
| 30 }, |
| 31 |
| 32 /** |
| 24 * Positions the tooltip to the top, right, bottom, left of its content. | 33 * Positions the tooltip to the top, right, bottom, left of its content. |
| 25 */ | 34 */ |
| 26 position: { | 35 position: { |
| 27 type: String, | 36 type: String, |
| 28 value: 'bottom' | 37 value: 'bottom' |
| 29 }, | 38 }, |
| 30 | 39 |
| 31 /** | 40 /** |
| 32 * If true, no parts of the tooltip will ever be shown offscreen. | 41 * If true, no parts of the tooltip will ever be shown offscreen. |
| 33 */ | 42 */ |
| (...skipping 81 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 115 target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? | 124 target = parentNode.nodeType == Node.DOCUMENT_FRAGMENT_NODE ? |
| 116 ownerRoot.host : parentNode; | 125 ownerRoot.host : parentNode; |
| 117 } | 126 } |
| 118 | 127 |
| 119 return target; | 128 return target; |
| 120 }, | 129 }, |
| 121 | 130 |
| 122 attached: function() { | 131 attached: function() { |
| 123 this._target = this.target; | 132 this._target = this.target; |
| 124 | 133 |
| 134 if (this.manualMode) |
| 135 return; |
| 136 |
| 125 this.listen(this._target, 'mouseenter', 'show'); | 137 this.listen(this._target, 'mouseenter', 'show'); |
| 126 this.listen(this._target, 'focus', 'show'); | 138 this.listen(this._target, 'focus', 'show'); |
| 127 this.listen(this._target, 'mouseleave', 'hide'); | 139 this.listen(this._target, 'mouseleave', 'hide'); |
| 128 this.listen(this._target, 'blur', 'hide'); | 140 this.listen(this._target, 'blur', 'hide'); |
| 129 this.listen(this._target, 'tap', 'hide'); | 141 this.listen(this._target, 'tap', 'hide'); |
| 130 }, | 142 }, |
| 131 | 143 |
| 132 detached: function() { | 144 detached: function() { |
| 133 if (this._target) { | 145 if (this._target && !this.manualMode) { |
| 134 this.unlisten(this._target, 'mouseenter', 'show'); | 146 this.unlisten(this._target, 'mouseenter', 'show'); |
| 135 this.unlisten(this._target, 'focus', 'show'); | 147 this.unlisten(this._target, 'focus', 'show'); |
| 136 this.unlisten(this._target, 'mouseleave', 'hide'); | 148 this.unlisten(this._target, 'mouseleave', 'hide'); |
| 137 this.unlisten(this._target, 'blur', 'hide'); | 149 this.unlisten(this._target, 'blur', 'hide'); |
| 138 this.unlisten(this._target, 'tap', 'hide'); | 150 this.unlisten(this._target, 'tap', 'hide'); |
| 139 } | 151 } |
| 140 }, | 152 }, |
| 141 | 153 |
| 142 show: function() { | 154 show: function() { |
| 143 // If the tooltip is already showing, there's nothing to do. | 155 // If the tooltip is already showing, there's nothing to do. |
| (...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 176 this._showing = false; | 188 this._showing = false; |
| 177 this._animationPlaying = true; | 189 this._animationPlaying = true; |
| 178 this.playAnimation('exit'); | 190 this.playAnimation('exit'); |
| 179 }, | 191 }, |
| 180 | 192 |
| 181 _forChanged: function() { | 193 _forChanged: function() { |
| 182 this._target = this.target; | 194 this._target = this.target; |
| 183 }, | 195 }, |
| 184 | 196 |
| 185 updatePosition: function() { | 197 updatePosition: function() { |
| 186 if (!this._target) | 198 if (!this._target || !this.offsetParent) |
| 187 return; | 199 return; |
| 188 | 200 |
| 189 var offset = this.offset; | 201 var offset = this.offset; |
| 190 // If a marginTop has been provided by the user (pre 1.0.3), use it. | 202 // If a marginTop has been provided by the user (pre 1.0.3), use it. |
| 191 if (this.marginTop != 14 && this.offset == 14) | 203 if (this.marginTop != 14 && this.offset == 14) |
| 192 offset = this.marginTop; | 204 offset = this.marginTop; |
| 193 | 205 |
| 194 var parentRect = this.offsetParent.getBoundingClientRect(); | 206 var parentRect = this.offsetParent.getBoundingClientRect(); |
| 195 var targetRect = this._target.getBoundingClientRect(); | 207 var targetRect = this._target.getBoundingClientRect(); |
| 196 var thisRect = this.getBoundingClientRect(); | 208 var thisRect = this.getBoundingClientRect(); |
| (...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 248 | 260 |
| 249 }, | 261 }, |
| 250 | 262 |
| 251 _onAnimationFinish: function() { | 263 _onAnimationFinish: function() { |
| 252 this._animationPlaying = false; | 264 this._animationPlaying = false; |
| 253 if (!this._showing) { | 265 if (!this._showing) { |
| 254 this.toggleClass('hidden', true, this.$.tooltip); | 266 this.toggleClass('hidden', true, this.$.tooltip); |
| 255 } | 267 } |
| 256 }, | 268 }, |
| 257 }); | 269 }); |
| OLD | NEW |