jviz-tooltip.html

<!--
@license
Copyright (c) 2016 The Jviz Project Authors. All rights reserved.
The Jviz Project is under the MIT License. See https://github.com/jviz/jviz/blob/dev/LICENSE
-->

<!-- Import components -->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../jviz/jviz.html">
<link rel="import" href="../jviz-styles/jviz-styles.html">

<!-- Tooltip tempalte -->
<dom-module id="jviz-tooltip">
  <template>
    <style>
      /* Host variables */
      :host
      {
        --jviz-tooltip-posx: 0px;
        --jviz-tooltip-posy: 0px;
        --jviz-tooltip-width: 0px;
        --jviz-tooltip-height: 0px;

        --jviz-tooltip-color-background: var(--jviz-blue);
        --jviz-tooltip-color-text: var(--jviz-blue-over);

        --jviz-tooltip-triangle-width: 5px;

        --jviz-tooltip-box-padding: 6px;
      }

      /* Tooltip visible */
      :host:not([visible]){ display: none; }

      /* Triangle style */
      :host .triangle
      {
        display: none;
        position: absolute;
        z-index: 2000;
      }

      /* Triangle top */
      :host[position="top"] .triangle
      {
        display: block;
        top: calc(var(--jviz-tooltip-posy) - var(--jviz-tooltip-triangle-width));
        left: calc(var(--jviz-tooltip-posx) - var(--jviz-tooltip-triangle-width));
        border-right: var(--jviz-tooltip-triangle-width) solid transparent;
        border-top: var(--jviz-tooltip-triangle-width) solid var(--jviz-tooltip-color-background);
        border-left: var(--jviz-tooltip-triangle-width) solid transparent;
      }

      /* Triangle bottom */
      :host[position="bottom"] .triangle
      {
        display: block;
        top: var(--jviz-tooltip-posy);
        left: calc(var(--jviz-tooltip-posx) - var(--jviz-tooltip-triangle-width));
        border-right: var(--jviz-tooltip-triangle-width) solid transparent;
        border-bottom: var(--jviz-tooltip-triangle-width) solid var(--jviz-tooltip-color-background);
        border-left: var(--jviz-tooltip-triangle-width) solid transparent;
      }

      /* Triangle left */
      :host[position="left"] .triangle
      {
        display: block;
        top: calc(var(--jviz-tooltip-posy) - var(--jviz-tooltip-triangle-width));
        left: calc(var(--jviz-tooltip-posx) - var(--jviz-tooltip-triangle-width));
        border-left: var(--jviz-tooltip-triangle-width) solid var(--jviz-tooltip-color-background);
        border-top: var(--jviz-tooltip-triangle-width) solid transparent;
        border-bottom: var(--jviz-tooltip-triangle-width) solid transparent;
      }

      /* Triangle right */
      :host[position="right"] .triangle
      {
        display: block;
        top: calc(var(--jviz-tooltip-posy) - var(--jviz-tooltip-triangle-width));
        left: calc(var(--jviz-tooltip-posx));
        border-right: var(--jviz-tooltip-triangle-width) solid var(--jviz-tooltip-color-background);
        border-top: var(--jviz-tooltip-triangle-width) solid transparent;
        border-bottom: var(--jviz-tooltip-triangle-width) solid transparent;
      }

      /* Tooltip box */
      :host .box
      {
        display: block;
        background-color: var(--jviz-tooltip-color-background);
        color: var(--jviz-tooltip-color-text);
        padding: var(--jviz-tooltip-box-padding);
        border-radius: 5px;
        @apply(--jviz-font);
        font-size: 12px;
        position: absolute;
        z-index: 2000;
      }

      /* Tooltip box top */
      :host[position="top"] .box
      {
        top: calc(var(--jviz-tooltip-posy) - var(--jviz-tooltip-triangle-width) - var(--jviz-tooltip-height) - var(--jviz-tooltip-box-padding) * 2);
        left: calc(var(--jviz-tooltip-posx) - var(--jviz-tooltip-box-padding) - var(--jviz-tooltip-width) / 2);
      }

      /* Tooltip box bottom */
      :host[position="bottom"] .box
      {
        top: calc(var(--jviz-tooltip-posy) + var(--jviz-tooltip-triangle-width));
        left: calc(var(--jviz-tooltip-posx) - var(--jviz-tooltip-box-padding) - var(--jviz-tooltip-width) / 2);
      }

      /* Tooltip box left */
      :host[position="left"] .box
      {
        top: calc(var(--jviz-tooltip-posy) - var(--jviz-tooltip-box-padding) - var(--jviz-tooltip-height) / 2);
        left: calc(var(--jviz-tooltip-posx) - var(--jviz-tooltip-triangle-width) - var(--jviz-tooltip-width) - var(--jviz-tooltip-box-padding) * 2);
      }

      /* Tooltip box right */
      :host[position="right"] .box
      {
        top: calc(var(--jviz-tooltip-posy) - var(--jviz-tooltip-box-padding) - var(--jviz-tooltip-height) / 2);
        left: calc(var(--jviz-tooltip-posx) + var(--jviz-tooltip-triangle-width));
      }

      /* Box links */
      :host .box a
      {
        color: var(--jviz-tooltip-color-text);
        text-decoration: underline;
      }
    </style>
    <!-- Triangle -->
    <div class="triangle"></div>
    <!-- Content box -->
    <div id="box" class="box"><content></content></div>
  </template>
</dom-module>

<!-- Tooltip logic -->
<script>
  //Tooltip object
  var jviz_tooltip = { is: 'jviz-tooltip' };

  //Tooltip properties
  jviz_tooltip.properties = {};
  jviz_tooltip.properties.position = { type: String, reflectToAttribute: true };
  jviz_tooltip.properties.color = { type: String, reflectToAttribute: true, observer: '_update_color' };
  jviz_tooltip.properties.posx = { type: String, reflectToAttribute: true, observer: '_update_posx' };
  jviz_tooltip.properties.posy = { type: String, reflectToAttribute: true, observer: '_update_posy' };
  jviz_tooltip.properties.visible = { type: Boolean, reflectToAttribute: true, value: false };
  jviz_tooltip.properties.over = { type: String, reflectToAttribute: true, value: false };

  //Attached method
  jviz_tooltip.attached = function()
  {
    //Save this
    var self = this;

    //Mouse over event
    jviz.dom.mouse_over(this.$.box, function(){ self.over = true; });

    //Mouse out event
    jviz.dom.mouse_out(this.$.box, function(){ self.over = false; });
  };

  //Update the tooltip size
  jviz_tooltip._update_size = function()
  {
    //Update the tooltip width
    this.customStyle['--jviz-tooltip-width'] = jviz.dom.width(this.$.box) + 'px';

    //Update the tooltip height
    this.customStyle['--jviz-tooltip-height'] = jviz.dom.height(this.$.box) + 'px';
  };

  //Update the tooltip position x
  jviz_tooltip._update_posx = function(value)
  {
    //Update the tooltip position x
    this.customStyle['--jviz-tooltip-posx'] = value.replace('px', '').replace('%', '') + 'px';

    //Update the tooltip size
    this._update_size();

    //Update the styles
    this.updateStyles();
  };

  //Update the tooltip position y
  jviz_tooltip._update_posy = function(value)
  {
    //Update the tooltip position y
    this.customStyle['--jviz-tooltip-posy'] = value.replace('px', '').replace('%', '') + 'px';

    //Update the tooltip size
    this._update_size();

    //Update the styles
    this.updateStyles();
  };

  //Set the tooltip content
  jviz_tooltip.content = function(value)
  {
    //Update the tooltip content
    jviz.dom.html(this.$.box, value);

    //Update the tooltip size
    this._update_size();

    //Update the styles
    this.updateStyles();
  };

  //Show the tooltip
  jviz_tooltip.show = function(){ this.visible = true; };

  //Hide the tooltip
  jviz_tooltip.hide = function(){ this.visible = false; };

  //Update the tooltip color
  jviz_tooltip._update_color = function(value)
  {
    //Update the color variable
    this.customStyle['--jviz-tooltip-color-background'] = 'var(--jviz-' + value + ')';

    //Update the text color variable
    this.customStyle['--jviz-tooltip-color-text'] = 'var(--jviz-' + value + '-over)';

    //Update the styles
    this.updateStyles();
  };

  //Check if mouse is over the element
  jviz_tooltip.is_over = function(){ return this.over; };

  //Move the tooltip to a position
  jviz_tooltip.move = function(x, y)
  {
    //Update the position x
    if(typeof x !== 'undefined'){ this.posx = x.toString(); }

    //Update the position y
    if(typeof y !== 'undefined'){ this.posy = y.toString(); }
  };

  //Register the tooltip element
  Polymer(jviz_tooltip);
</script>