Home | History | Annotate | Download | only in core-tooltip 
      1 <!--
      2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
      3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.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/CONTRIBUTORS.txt
      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/PATENTS.txt
      8 -->
      9 
     10 <!--
     11 The `core-tooltip` element creates a hover tooltip centered for the content
     12 it contains. It can be positioned on the top|bottom|left|right of content using
     13 the `position` attribute.
     14 
     15 To include HTML in the tooltip, include the `tip` attribute on the relevant
     16 content.
     17 
     18 <b>Example</b>:
     19 
     20     <core-tooltip label="I'm a tooltip">
     21       <span>Hover over me.</span>
     22     </core-tooltip>
     23 
     24 <b>Example</b> - positioning the tooltip to the right:
     25 
     26     <core-tooltip label="I'm a tooltip to the right" position="right">
     27       <polymer-ui-icon-button icon="drawer"></polymer-ui-icon-button>
     28     </core-tooltip>
     29 
     30 <b>Example</b> - no arrow and showing by default:
     31 
     32     <core-tooltip label="Tooltip with no arrow and always on" noarrow show>
     33       <img src="image.jpg">
     34     </core-tooltip>
     35 
     36 <b>Example</b> - rich tooltip using the `tip` attribute:
     37 
     38     <core-tooltip>
     39       <div>Example of a rich information tooltip</div>
     40       <div tip>
     41         <img src="profile.jpg">Foo <b>Bar</b> - <a href="#">@baz</a>
     42       </div>
     43     </core-tooltip>
     44 
     45 @group Polymer Core Elements
     46 @element core-tooltip
     47 @homepage http://polymer.github.io/core-tooltip
     48 -->
     49 
     50 <link rel="import" href="../polymer/polymer.html">
     51 
     52 <!-- TODO: would be nice to inherit from label to get .htmlFor, and .control,
     53            but the latter is readonly. -->
     54 <!-- TODO: support off center arrows. -->
     55 <!-- TODO: detect mobile and apply the .large class, instead of manual
     56            control. -->
     57 <!-- TODO: possibly reuse core-overlay. -->
     58 <polymer-element name="core-tooltip" attributes="noarrow position label show" tabindex="0">
     59 <template>
     60 
     61   <link rel="stylesheet" href="core-tooltip.css">
     62 
     63   <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, show: show} | tokenList}}">
     64     <content select="[tip]">{{label}}</content>
     65   </div>
     66 
     67   <content></content>
     68 
     69 </template>
     70 <script>
     71 
     72   Polymer('core-tooltip', {
     73 
     74     /**
     75      * A simple string label for the tooltip to display. To display a rich
     76      * that includes HTML, use the `tip` attribute on the content.
     77      *
     78      * @attribute label
     79      * @type string
     80      * @default null
     81      */
     82     label: null,
     83 
     84     /**
     85      * If true, the tooltip an arrow pointing towards the content.
     86      *
     87      * @attribute noarrow
     88      * @type boolean
     89      * @default false
     90      */
     91     noarrow: false,
     92 
     93     /**
     94      * If true, the tooltip displays by default.
     95      *
     96      * @attribute show
     97      * @type boolean
     98      * @default false
     99      */
    100     show: false,
    101 
    102     /**
    103      * Positions the tooltip to the top, right, bottom, left of its content.
    104      *
    105      * @attribute position
    106      * @type string
    107      * @default 'bottom'
    108      */
    109     position: 'bottom',
    110 
    111     attached: function() {
    112       this.setPosition();
    113     },
    114 
    115     labelChanged: function(oldVal, newVal) {
    116       // Run if we're not after attached().
    117       if (oldVal) {
    118         this.setPosition();
    119       }
    120     },
    121 
    122     setPosition: function() {
    123       var controlWidth = this.clientWidth;
    124       var controlHeight = this.clientHeight;
    125 
    126       var styles = getComputedStyle(this.$.tooltip);
    127       var toolTipWidth = parseFloat(styles.width);
    128       var toolTipHeight = parseFloat(styles.height);
    129 
    130       switch (this.position) {
    131         case 'top':
    132         case 'bottom':
    133           this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px';
    134           break;
    135         case 'left':
    136         case 'right':
    137           this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px';
    138           break;
    139       }
    140     }
    141   });
    142 
    143 </script>
    144 </polymer-element>
    145