OLD | NEW |
(Empty) | |
| 1 |
| 2 |
| 3 Polymer('core-tooltip', { |
| 4 |
| 5 /** |
| 6 * A simple string label for the tooltip to display. To display a rich |
| 7 * that includes HTML, use the `tip` attribute on the content. |
| 8 * |
| 9 * @attribute label |
| 10 * @type string |
| 11 * @default null |
| 12 */ |
| 13 label: null, |
| 14 |
| 15 /** |
| 16 * If true, the tooltip an arrow pointing towards the content. |
| 17 * |
| 18 * @attribute noarrow |
| 19 * @type boolean |
| 20 * @default false |
| 21 */ |
| 22 noarrow: false, |
| 23 |
| 24 /** |
| 25 * If true, the tooltip displays by default. |
| 26 * |
| 27 * @attribute show |
| 28 * @type boolean |
| 29 * @default false |
| 30 */ |
| 31 show: false, |
| 32 |
| 33 /** |
| 34 * Positions the tooltip to the top, right, bottom, left of its content. |
| 35 * |
| 36 * @attribute position |
| 37 * @type string |
| 38 * @default 'bottom' |
| 39 */ |
| 40 position: 'bottom', |
| 41 |
| 42 attached: function() { |
| 43 this.setPosition(); |
| 44 }, |
| 45 |
| 46 labelChanged: function(oldVal, newVal) { |
| 47 // Run if we're not after attached(). |
| 48 if (oldVal) { |
| 49 this.setPosition(); |
| 50 } |
| 51 }, |
| 52 |
| 53 setPosition: function() { |
| 54 var controlWidth = this.clientWidth; |
| 55 var controlHeight = this.clientHeight; |
| 56 |
| 57 var styles = getComputedStyle(this.$.tooltip); |
| 58 var toolTipWidth = parseFloat(styles.width); |
| 59 var toolTipHeight = parseFloat(styles.height); |
| 60 |
| 61 switch (this.position) { |
| 62 case 'top': |
| 63 case 'bottom': |
| 64 this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px'; |
| 65 break; |
| 66 case 'left': |
| 67 case 'right': |
| 68 this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px'; |
| 69 break; |
| 70 } |
| 71 } |
| 72 }); |
| 73 |
OLD | NEW |