ADSK Tooltip

by gonchuki

HTML

<p><span title="my tooltip">from the title attribute</span></p>

<p><span title="my tooltip" data-tooltip-position="right">from the title attribute, opening from the right</span></p>

<p><span data-tooltip="another tooltip, this can be dynamically set">from the data-tooltip attribute, click to change</span></p>

<p><span data-tooltip-contents="#my_complex_tooltip">data-tooltip-contents allows having complex HTML content</span></p>

<p><span data-tooltip-contents="#my_complex_tooltip">complex tooltips can be used for more than one element</span></p>


<div style="display: none">
    <div id="my_complex_tooltip">
        <h3>fancy title</h3>
        <p><em>some content</em></p>
    </div>
</div>

CSS

.tooltip {
  display: none;
  position: absolute;
  min-height: 10px;
  padding: 4px 8px;
  z-index: 84001;
  color: #2a2a2a;
  border: 1px solid #808080;
  border-color: rgba(0,0,0,.5);
  background-color: #f7f7f7;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.95)), to(rgba(230,230,230,0.95)));
  background: -moz-linear-gradient(rgba(255,255,255,0.95), rgba(230,230,230,0.95));
  background: -webkit-linear-gradient(rgba(255,255,255,0.95), rgba(230,230,230,0.95));
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.3);
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 1px 2px rgba(0,0,0,.3);
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

.tooltip .pointer {
  position: absolute;
  top: -6px;
  left: 5px;
  width: 100%;
  height: 6px;
  background: url(../images/layout/tooltip_pointer.png) no-repeat left top;
}

.tooltip.right .pointer {
  left: auto;
  right: 5px;
  background-position: right top;
}

.tooltip.visible {
  display: block;
}

.has_tooltip {
  cursor: help;
}

JavaScript

// requires: [jQuery, jQueryUI position]
  // provides: [Tooltip.captureTargets(), Tooltip.forceHide(), Tooltip.reposition() ]
  var Tooltip = this.Tooltip = (function () {
    var tooltip, tooltip_content, timer_id,
        fn = {
          init: function () {
            tooltip = document.getElementById('jq-ads-tooltip') ? $(document.getElementById('jq-ads-tooltip')) : $('<div/>', { 'class': 'tooltip', id: 'jq-ads-tooltip' }).html('<span class="pointer"></span><div class="jq-ads-tooltip-content"></div>').appendTo(document.body);
            tooltip_content = tooltip.find('.jq-ads-tooltip-content');
          },
          reposition: function (tooltip_position) {
            var nop = document.body.offsetWidth; // force reflow
            tooltip.position({my: tooltip_position + ' top', at: tooltip_position + ' bottom', of: this, offset: '0 5'});
          },
          setTimer: function(callback) {
            if (timer_id) clearTimeout(timer_id);
            timer_id = setTimeout(callback, 750);
          },
          killTimer: function() {
            if (timer_id) {
              clearTimeout(timer_id);
              timer_id = null;
            }
          }
        };

    $(document.body).bind('click.tooltip', function () { Tooltip.forceHide(); });
    $(document).bind('keydown.tooltip', function (e) { if (e.keyCode === 27) Tooltip.forceHide(); });

    return {
      captureTargets: function (targets, options) {
        // short circuit if all targets are already attached
        targets = targets.not('.has_tooltip');
        if (!targets.length) return;

        options = $.extend({}, { position: 'left' }, options);

        targets.each(function () {
          var $this = $(this),
              $tip = this.getAttribute('data-tooltip-contents') ? $(this.getAttribute('data-tooltip-contents')) : (this.getAttribute('data-tooltip') || this.getAttribute('title')),
              tooltip_position = this.getAttribute('data-tooltip-position') ||...