Polymer elements added to third_party/polymer.

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

+<!--
+Copyright (c) 2014 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">
+      <polymer-ui-icon-button icon="drawer"></polymer-ui-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> - 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>
+
+@group Polymer Core Elements
+@element core-tooltip
+@homepage http://polymer.github.io/core-tooltip
+-->
+
+<link rel="import" href="../polymer/polymer.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" tabindex="0">
+<template>
+
+  <link rel="stylesheet" href="core-tooltip.css">
+
+  <div id="tooltip" class="polymer-tooltip {{position}} {{ {noarrow: noarrow, show: show} | tokenList}}">
+    <content select="[tip]">{{label}}</content>
+  </div>
+
+  <content></content>
+
+</template>
+<script>
+
+  Polymer('core-tooltip', {
+
+    /**
+     * A simple string label for the tooltip to display. To display a rich
+     * that includes HTML, use the `tip` attribute on the content.
+     *
+     * @attribute label
+     * @type string
+     * @default null
+     */
+    label: null,
+
+    /**
+     * If true, the tooltip an arrow pointing towards the content.
+     *
+     * @attribute noarrow
+     * @type boolean
+     * @default false
+     */
+    noarrow: false,
+
+    /**
+     * If true, the tooltip displays by default.
+     *
+     * @attribute show
+     * @type boolean
+     * @default false
+     */
+    show: false,
+
+    /**
+     * Positions the tooltip to the top, right, bottom, left of its content.
+     *
+     * @attribute position
+     * @type string
+     * @default 'bottom'
+     */
+    position: 'bottom',
+
+    attached: function() {
+      this.setPosition();
+    },
+
+    labelChanged: function(oldVal, newVal) {
+      // Run if we're not after attached().
+      if (oldVal) {
+        this.setPosition();
+      }
+    },
+
+    setPosition: function() {
+      var controlWidth = this.clientWidth;
+      var controlHeight = this.clientHeight;
+
+      var styles = getComputedStyle(this.$.tooltip);
+      var toolTipWidth = parseFloat(styles.width);
+      var toolTipHeight = parseFloat(styles.height);
+
+      switch (this.position) {
+        case 'top':
+        case 'bottom':
+          this.$.tooltip.style.left = (controlWidth - toolTipWidth) / 2 + 'px';
+          break;
+        case 'left':
+        case 'right':
+          this.$.tooltip.style.top = (controlHeight - toolTipHeight) / 2 + 'px';
+          break;
+      }
+    }
+  });
+
+</script>
+</polymer-element>