diff options
Diffstat (limited to 'catapult/third_party/polymer/components/core-tooltip/core-tooltip.html')
-rw-r--r-- | catapult/third_party/polymer/components/core-tooltip/core-tooltip.html | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/core-tooltip/core-tooltip.html b/catapult/third_party/polymer/components/core-tooltip/core-tooltip.html new file mode 100644 index 00000000..634be469 --- /dev/null +++ b/catapult/third_party/polymer/components/core-tooltip/core-tooltip.html @@ -0,0 +1,217 @@ +<!-- +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> |