catapult/dashboard/dashboard/elements/custom-tooltip.html

<!--
The 'custom-tooltip' displays overlaid pop-up above a target.

By default 'custom-tooltip' will close whenever other elements are focused
as well as automatically disappear after 'duration'.

Example usage:
  var target = event.target;
  var bound = target.getBoundingClientRect();
  var tooltip = document.getElementById("tooltip");
  tooltip.set('A tooltip message', bound.left, bound.top);
-->
<link rel="import" href="/components/paper-shadow/paper-shadow.html">
<link rel="import" href="/components/core-overlay/core-overlay.html">
<polymer-element
    name="custom-tooltip"
    attributes="autoCloseDisabled transition duration maxWidth">
  <template>
    <style>
      :host {
        border: 1px solid black;
        position: absolute;
        background-color: rgba(31, 31, 31, 0.901961);
        color: white;
      }

      #container {
        overflow: hidden;
      }

      .message-content {
        margin: 3px;
      }
    </style>

    <paper-shadow z="3">
      <core-overlay id="overlay" target="{{}}" opened="{{opened}}"
          autoCloseDisabled="{{autoCloseDisabled}}"
          sizingTarget="{{$.container}}" transition="{{transition}}"></core-overlay>

      <div id="container" horizontal layout  max-width="{{maxWidth}}">
        <div class="message-content" flex id="content"></div>
        <div class="message-content">
          <content></content>
        </div>
      </div>
    </paper-shadow>

  </template>

  <script>
    'use strict';
    Polymer('custom-tooltip', {

      /**
       * Number of milliseconds to stay opened. 0 to stay open indefinitely.
       */
      duration: 6000,

      /**
       * Whether to close overlay if focus is taken somewhere else.
       */
      autoCloseDisabled: false,

      /**
       * Add event handler.
       * See: https://goo.gl/QIYbsB
       */
      eventDelegates: {
        'core-resize': 'positionChanged'
      },

      ready: function() {
        this.$.overlay.addEventListener(
            'core-overlay-close-completed',
            this.onCoreOverlayClosed.bind(this), false);
      },

      /**
       * Sets and opens tooltip. If tooltip is already opened, it will close
       * then re-open.
       *
       * @param {string|HTMLElement} content Either string or HTMLElement.
       * @param {number} targetXpos target x position
       * @param {number} targetYpos target y position
       */
      set: function(content, targetXpos, targetYpos) {
        if (typeof content === 'string') {
          this.$.content.innerHTML = content;
        } else {
          this.$.content.innerHTML = '';
          this.$.content.appendChild(content);
        }
        this.targetXpos = targetXpos;
        this.targetYpos = targetYpos;
        this.style.opacity = 0;

        if (this.opened) {
          this.shouldOpen = true;
        } else {
          this.show();
        }
      },

      positionChanged: function(oldVal, newVal) {
        // Add a little delay to prevent window jumping when user clicks the
        // target too fast.
        this.job('positionJob', this.updatePosition, 50);
      },

      updatePosition: function() {
        var left = this.targetXpos - this.clientWidth / 2;
        var top = this.targetYpos - this.clientHeight - 15;
        this.style.top = top + 'px';
        this.style.left = left + 'px';
        this.style.opacity = 1;
      },

      /**
       * On "opened" changed, add a timer to hide overlay.
       */
      openedChanged: function() {
        if (this.opened && this.duration > 0) {
          if (this.hideJob) {
            this.hideJob.stop();
          }
          // https://www.polymer-project.org/0.5/docs/polymer/polymer.html#job
          this.hideJob = this.job(this.hideJob, this.hide, this.duration);
        }
      },

      /**
       * Handler for core overlay closed event.
       */
      onCoreOverlayClosed: function(event) {
        if (this.shouldOpen) {
          this.shouldOpen = false;
          this.show();
        }
      },

      /**
       * Hide this custom-tooltip.
       */
      hide: function() {
        this.opened = false;
      },

      /**
       * Show this custom-tooltip.
       */
      show: function() {
        this.opened = true;
      }
    });
  </script>
</polymer-element>