core-tooltip-extracted.js revision 1320f92c476a1ad9d19dba2a48c72b75566198e9 
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
74