third_party/polymer/components/core-tooltip/core-tooltip.html

   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       <core-icon-button icon="drawer"></core-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> - disable the tooltip.
  37
  38     <core-tooltip label="Disabled label never shows" disabled>
  39       ...
  40     </core-tooltip>
  41
  42 <b>Example</b> - rich tooltip using the `tip` attribute:
  43
  44     <core-tooltip>
  45       <div>Example of a rich information tooltip</div>
  46       <div tip>
  47         <img src="profile.jpg">Foo <b>Bar</b> - <a href="#">@baz</a>
  48       </div>
  49     </core-tooltip>
  50
  51 By default, the `tip` attribute specifies the HTML content for a rich tooltip.
  52 You can customize this attribute with the `tipAttribute` attribute:
  53
  54     <core-tooltip tipAttribute="htmltooltip">
  55       <div>Example of a rich information tooltip</div>
  56       <div htmltooltip>
  57         ...
  58       </div>
  59     </core-tooltip>
  60
  61 @group Polymer Core Elements
  62 @element core-tooltip
  63 @extends core-focusable
  64 @mixins Polymer.CoreFocusable
  65 @homepage http://www.polymer-project.org/components/core-tooltip/index.html
  66 -->
  67
  68 <link rel="import" href="../polymer/polymer.html">
  69 <link rel="import" href="../core-focusable/core-focusable.html">
  70 <link rel="import" href="../core-resizable/core-resizable.html">
  71
  72 <!-- TODO: would be nice to inherit from label to get .htmlFor, and .control,
  73            but the latter is readonly. -->
  74 <!-- TODO: support off center arrows. -->
  75 <!-- TODO: detect mobile and apply the .large class, instead of manual
  76            control. -->
  77 <!-- TODO: possibly reuse core-overlay. -->
  78 <polymer-element name="core-tooltip" attributes="noarrow position label show tipAttribute" role="tooltip" tabindex="0">
  79 <template>
  80
  81   <link rel="stylesheet" href="core-tooltip.css">
  82   <div id="tooltip" hidden?="{{!hasTooltipContent}}"
  83        class="core-tooltip {{position}} {{ {noarrow: noarrow, show: show && !disabled} | tokenList}}">
  84     <content id="c" select="[{{tipAttribute}}]">{{label}}</content>
  85   </div>
  86
  87   <content></content>
  88
  89 </template>
  90 <script>
  91 (function() {
  92
  93   var proto = {
  94
  95       /**
  96        * A simple string label for the tooltip to display. To display a rich
  97        * HTML tooltip instead, omit `label` and include the `tip` attribute
  98        * on a child node of `core-tooltip`.
  99        *
 100        * @attribute label
 101        * @type string
 102        * @default null
 103        */
 104       label: null,
 105
 106       eventDelegates: {
 107         'core-resize': 'positionChanged'
 108       },
 109
 110       computed: {
 111         // Indicates whether the tooltip has a set label propety or
 112         // an element with the `tip` attribute.
 113         hasTooltipContent: 'label || !!tipElement'
 114       },
 115
 116       publish: {
 117         /**
 118          * Forces the tooltip to display. If `disabled` is set, this property is ignored.
 119          *
 120          * @attribute show
 121          * @type boolean
 122          * @default false
 123          */
 124         show: {value: false, reflect: true},
 125
 126         /**
 127          * Positions the tooltip to the top, right, bottom, left of its content.
 128          *
 129          * @attribute position
 130          * @type string
 131          * @default 'bottom'
 132          */
 133         position: {value: 'bottom', reflect: true},
 134
 135         /**
 136          * If true, the tooltip an arrow pointing towards the content.
 137          *
 138          * @attribute noarrow
 139          * @type boolean
 140          * @default false
 141          */
 142         noarrow: {value: false, reflect: true}
 143       },
 144
 145       /**
 146        * Customizes the attribute used to specify which content
 147        * is the rich HTML tooltip.
 148        *
 149        * @attribute tipAttribute
 150        * @type string
 151        * @default 'tip'
 152        */
 153       tipAttribute: 'tip',
 154
 155       attached: function() {
 156         this.updatedChildren();
 157         this.resizableAttachedHandler();
 158       },
 159
 160       detached: function() {
 161         this.resizableDetachedHandler();
 162       },
 163
 164       updatedChildren: function () {
 165         this.tipElement = null;
 166
 167         for (var i = 0, el; el = this.$.c.getDistributedNodes()[i]; ++i) {
 168           if (el.hasAttribute && el.hasAttribute('tip')) {
 169             this.tipElement = el;
 170             break;
 171           }
 172         }
 173
 174         // Job ensures we're not double calling setPosition() on DOM attach.
 175         this.job('positionJob', this.setPosition);
 176
 177         // Monitor children to re-position tooltip when light dom changes.
 178         this.onMutation(this, this.updatedChildren);
 179       },
 180
 181       labelChanged: function(oldVal, newVal) {
 182         this.job('positionJob', this.setPosition);
 183       },
 184
 185       positionChanged: function(oldVal, newVal) {
 186         this.job('positionJob', this.setPosition);
 187       },
 188
 189       setPosition: function() {
 190         var controlWidth = this.clientWidth;
 191         var controlHeight = this.clientHeight;
 192         var toolTipWidth = this.$.tooltip.clientWidth;
 193         var toolTipHeight = this.$.tooltip.clientHeight;
 194
 195         switch (this.position) {
 196           case 'top':
 197           case 'bottom':
 198             this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px';
 199             this.$.tooltip.style.top = null;
 200             break;
 201           case 'left':
 202           case 'right':
 203             this.$.tooltip.style.left = null;
 204             this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px';
 205             break;
 206         }
 207       }
 208
 209     };
 210
 211     Polymer.mixin2(proto, Polymer.CoreFocusable);
 212     Polymer.mixin(proto, Polymer.CoreResizable);
 213     Polymer(proto);
 214   })();
 215
 216 </script>
 217 </polymer-element>