| <!-- |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
| The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
| Code distributed by Google as part of the polymer project is also |
| subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
| --> |
| |
| <!-- |
| The `core-tooltip` element creates a hover tooltip centered for the content |
| it contains. It can be positioned on the top|bottom|left|right of content using |
| the `position` attribute. |
| |
| To include HTML in the tooltip, include the `tip` attribute on the relevant |
| content. |
| |
| <b>Example</b>: |
| |
| <core-tooltip label="I'm a tooltip"> |
| <span>Hover over me.</span> |
| </core-tooltip> |
| |
| <b>Example</b> - positioning the tooltip to the right: |
| |
| <core-tooltip label="I'm a tooltip to the right" position="right"> |
| <core-icon-button icon="drawer"></core-icon-button> |
| </core-tooltip> |
| |
| <b>Example</b> - no arrow and showing by default: |
| |
| <core-tooltip label="Tooltip with no arrow and always on" noarrow show> |
| <img src="image.jpg"> |
| </core-tooltip> |
| |
| <b>Example</b> - disable the tooltip. |
| |
| <core-tooltip label="Disabled label never shows" disabled> |
| ... |
| </core-tooltip> |
| |
| <b>Example</b> - rich tooltip using the `tip` attribute: |
| |
| <core-tooltip> |
| <div>Example of a rich information tooltip</div> |
| <div tip> |
| <img src="profile.jpg">Foo <b>Bar</b> - <a href="#">@baz</a> |
| </div> |
| </core-tooltip> |
| |
| By default, the `tip` attribute specifies the HTML content for a rich tooltip. |
| You can customize this attribute with the `tipAttribute` attribute: |
| |
| <core-tooltip tipAttribute="htmltooltip"> |
| <div>Example of a rich information tooltip</div> |
| <div htmltooltip> |
| ... |
| </div> |
| </core-tooltip> |
| |
| @group Polymer Core Elements |
| @element core-tooltip |
| @mixins Polymer.CoreFocusable https://github.com/polymer/core-focusable |
| @mixins Polymer.CoreResizable https://github.com/polymer/core-resizable |
| @homepage http://www.polymer-project.org/components/core-tooltip/index.html |
| --> |
| |
| <link rel="import" href="../polymer/polymer.html"> |
| <link rel="import" href="../core-focusable/core-focusable.html"> |
| <link rel="import" href="../core-resizable/core-resizable.html"> |
| |
| <!-- TODO: would be nice to inherit from label to get .htmlFor, and .control, |
| but the latter is readonly. --> |
| <!-- TODO: support off center arrows. --> |
| <!-- TODO: detect mobile and apply the .large class, instead of manual |
| control. --> |
| <!-- TODO: possibly reuse core-overlay. --> |
| <polymer-element name="core-tooltip" attributes="noarrow position label show tipAttribute" role="tooltip" tabindex="0"> |
| <template> |
| <link rel="stylesheet" href="core-tooltip.css"> |
| |
| <div id="tooltip" hidden?="{{!hasTooltipContent}}" |
| class="core-tooltip {{position}} {{ {noarrow: noarrow, show: show && !disabled} | tokenList}}"> |
| <content id="c" select="[{{tipAttribute}}]">{{label}}</content> |
| </div> |
| |
| <content></content> |
| |
| </template> |
| <script> |
| (function() { |
| |
| var proto = { |
| |
| /** |
| * A simple string label for the tooltip to display. To display a rich |
| * HTML tooltip instead, omit `label` and include the `tip` attribute |
| * on a child node of `core-tooltip`. |
| * |
| * @attribute label |
| * @type string |
| * @default null |
| */ |
| label: null, |
| |
| eventDelegates: { |
| 'core-resize': 'positionChanged' |
| }, |
| |
| computed: { |
| // Indicates whether the tooltip has a set label propety or |
| // an element with the `tip` attribute. |
| hasTooltipContent: 'label || !!tipElement' |
| }, |
| |
| publish: { |
| /** |
| * Forces the tooltip to display. If `disabled` is set, this property is ignored. |
| * |
| * @attribute show |
| * @type boolean |
| * @default false |
| */ |
| show: {value: false, reflect: true}, |
| |
| /** |
| * Positions the tooltip to the top, right, bottom, left of its content. |
| * |
| * @attribute position |
| * @type string |
| * @default 'bottom' |
| */ |
| position: {value: 'bottom', reflect: true}, |
| |
| /** |
| * If true, the tooltip an arrow pointing towards the content. |
| * |
| * @attribute noarrow |
| * @type boolean |
| * @default false |
| */ |
| noarrow: {value: false, reflect: true} |
| }, |
| |
| /** |
| * Customizes the attribute used to specify which content |
| * is the rich HTML tooltip. |
| * |
| * @attribute tipAttribute |
| * @type string |
| * @default 'tip' |
| */ |
| tipAttribute: 'tip', |
| |
| attached: function() { |
| this.updatedChildren(); |
| this.resizableAttachedHandler(); |
| }, |
| |
| detached: function() { |
| this.resizableDetachedHandler(); |
| }, |
| |
| updatedChildren: function () { |
| this.tipElement = null; |
| |
| for (var i = 0, el; el = this.$.c.getDistributedNodes()[i]; ++i) { |
| if (el.hasAttribute && el.hasAttribute(this.tipAttribute)) { |
| this.tipElement = el; |
| break; |
| } |
| } |
| |
| // Job ensures we're not double calling setPosition() on DOM attach. |
| this.job('positionJob', this.setPosition); |
| |
| // Monitor children to re-position tooltip when light dom changes. |
| this.onMutation(this, this.updatedChildren); |
| }, |
| |
| labelChanged: function(oldVal, newVal) { |
| this.job('positionJob', this.setPosition); |
| }, |
| |
| positionChanged: function(oldVal, newVal) { |
| this.job('positionJob', this.setPosition); |
| }, |
| |
| setPosition: function() { |
| var controlWidth = this.clientWidth; |
| var controlHeight = this.clientHeight; |
| var toolTipWidth = this.$.tooltip.clientWidth; |
| var toolTipHeight = this.$.tooltip.clientHeight; |
| |
| switch (this.position) { |
| case 'top': |
| case 'bottom': |
| this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px'; |
| this.$.tooltip.style.top = null; |
| break; |
| case 'left': |
| case 'right': |
| this.$.tooltip.style.left = null; |
| this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px'; |
| break; |
| } |
| } |
| |
| }; |
| |
| Polymer.mixin2(proto, Polymer.CoreFocusable); |
| Polymer.mixin(proto, Polymer.CoreResizable); |
| Polymer(proto); |
| })(); |
| |
| </script> |
| </polymer-element> |