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 |