mermaid

<!DOCTYPE html> <html> <head> <title>tipsy.js</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel="stylesheet" media="all" href="../../../doc-style.css" /> <script src="../../../doc-filelist.js"></script> <script> var relativeDir = "../../../", thisFile = "Users/knut/Documents/source/mermaid/bower_components/dagre-d3/demo/tipsy.js", defaultSidebar = true; </script> <script src="../../../doc-script.js"></script> <script src="../../../mermaid.js"></script> <link rel="stylesheet" href="../../../mermaid.css" /> </head> <body> <div id="sidebar_wrapper"> <div id="sidebar_switch"> Files Headings </div> <div id="tree"></div> <div id="headings"> <div class="heading h1"> <a href="#tipsy.js">tipsy.js</a> </div> </div> </div> <div id="sidebar-toggle"></div> <div id="container"><div class="background highlight"></div> <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td class="docs"> <div class="pilwrap" id="tipsy.js"> <h1> <a href="#tipsy.js" name="tipsy.js" class="pilcrow">¶</a>tipsy.js </h1> </div> </td> <td class="code highlight"></td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-1" id="section-1">¶</a> </div> tipsy, facebook style tooltips for jquery version 1.0.0a (c) 2008-2010 jason frame [jason@onehackoranother.com] released under the MIT license </td> <td class="code highlight"><div class="highlight"><pre>(function($) { function maybeCall(thing, ctx) { return (typeof thing == 'function') ? (thing.call(ctx)) : thing; } function Tipsy(element, options) { this.$element = $(element); this.options = options; this.enabled = true; this.fixTitle(); } Tipsy.prototype = { show: function() { var title = this.getTitle(); if (title && this.enabled) { var $tip = this.tip(); $tip.find('.tipsy-inner')[this.options.html ? 'html' : 'text'](title); $tip[0].className = 'tipsy'; // reset classname in case of dynamic gravity $tip.remove().css({top: 0, left: 0, visibility: 'hidden', display: 'block'}).prependTo(document.body); var pos = $.extend({}, this.$element.offset(), { width: this.$element[0].offsetWidth || 0, height: this.$element[0].offsetHeight || 0 }); if (typeof this.$element[0].nearestViewportElement == 'object') { </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-2" id="section-2">¶</a> </div> SVG </td> <td class="code highlight"><div class="highlight"><pre> var el = this.$element[0]; var rect = el.getBoundingClientRect(); pos.width = rect.width; pos.height = rect.height; } var actualWidth = $tip[0].offsetWidth, actualHeight = $tip[0].offsetHeight, gravity = maybeCall(this.options.gravity, this.$element[0]); var tp; switch (gravity.charAt(0)) { case 'n': tp = {top: pos.top + pos.height + this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; break; case 's': tp = {top: pos.top - actualHeight - this.options.offset, left: pos.left + pos.width / 2 - actualWidth / 2}; break; case 'e': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth - this.options.offset}; break; case 'w': tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width + this.options.offset}; break; } if (gravity.length == 2) { if (gravity.charAt(1) == 'w') { tp.left = pos.left + pos.width / 2 - 15; } else { tp.left = pos.left + pos.width / 2 - actualWidth + 15; } } $tip.css(tp).addClass('tipsy-' + gravity); $tip.find('.tipsy-arrow')[0].className = 'tipsy-arrow tipsy-arrow-' + gravity.charAt(0); if (this.options.className) { $tip.addClass(maybeCall(this.options.className, this.$element[0])); } if (this.options.fade) { $tip.stop().css({opacity: 0, display: 'block', visibility: 'visible'}).animate({opacity: this.options.opacity}); } else { $tip.css({visibility: 'visible', opacity: this.options.opacity}); } var t = this; var set_hovered = function(set_hover){ return function(){ t.$tip.stop(); t.tipHovered = set_hover; if (!set_hover){ if (t.options.delayOut === 0) { t.hide(); } else { setTimeout(function() { if (t.hoverState == 'out') t.hide(); }, t.options.delayOut); } } }; }; $tip.hover(set_hovered(true), set_hovered(false)); } }, hide: function() { if (this.options.fade) { this.tip().stop().fadeOut(function() { $(this).remove(); }); } else { this.tip().remove(); } }, fixTitle: function() { var $e = this.$element; if ($e.attr('title') || typeof($e.attr('original-title')) != 'string') { $e.attr('original-title', $e.attr('title') || '').removeAttr('title'); } if (typeof $e.context.nearestViewportElement == 'object'){ if ($e.children('title').length){ $e.append('<original-title>' + ($e.children('title').text() || '') + '</original-title>') .children('title').remove(); } } }, getTitle: function() { var title, $e = this.$element, o = this.options; this.fixTitle(); if (typeof o.title == 'string') { var title_name = o.title == 'title' ? 'original-title' : o.title; if ($e.children(title_name).length){ title = $e.children(title_name).html(); } else{ title = $e.attr(title_name); } } else if (typeof o.title == 'function') { title = o.title.call($e[0]); } title = ('' + title).replace(/(^\s*|\s*$)/, ""); return title || o.fallback; }, tip: function() { if (!this.$tip) { this.$tip = $('<div class="tipsy"></div>').html('<div class="tipsy-arrow"></div><div class="tipsy-inner"></div>'); } return this.$tip; }, validate: function() { if (!this.$element[0].parentNode) { this.hide(); this.$element = null; this.options = null; } }, enable: function() { this.enabled = true; }, disable: function() { this.enabled = false; }, toggleEnabled: function() { this.enabled = !this.enabled; } }; $.fn.tipsy = function(options) { if (options === true) { return this.data('tipsy'); } else if (typeof options == 'string') { var tipsy = this.data('tipsy'); if (tipsy) tipsy[options](); return this; } options = $.extend({}, $.fn.tipsy.defaults, options); if (options.hoverlock && options.delayOut === 0) { options.delayOut = 100; } function get(ele) { var tipsy = $.data(ele, 'tipsy'); if (!tipsy) { tipsy = new Tipsy(ele, $.fn.tipsy.elementOptions(ele, options)); $.data(ele, 'tipsy', tipsy); } return tipsy; } function enter() { var tipsy = get(this); tipsy.hoverState = 'in'; if (options.delayIn === 0) { tipsy.show(); } else { tipsy.fixTitle(); setTimeout(function() { if (tipsy.hoverState == 'in') tipsy.show(); }, options.delayIn); } } function leave() { var tipsy = get(this); tipsy.hoverState = 'out'; if (options.delayOut === 0) { tipsy.hide(); } else { var to = function() { if (!tipsy.tipHovered || !options.hoverlock){ if (tipsy.hoverState == 'out') tipsy.hide(); } }; setTimeout(to, options.delayOut); } } if (options.trigger != 'manual') { var binder = options.live ? 'live' : 'bind', eventIn = options.trigger == 'hover' ? 'mouseenter' : 'focus', eventOut = options.trigger == 'hover' ? 'mouseleave' : 'blur'; this[binder](eventIn, enter)[binder](eventOut, leave); } return this; }; $.fn.tipsy.defaults = { className: null, delayIn: 0, delayOut: 0, fade: false, fallback: '', gravity: 'n', html: false, live: false, offset: 0, opacity: 0.8, title: 'title', trigger: 'hover', hoverlock: false }; </pre></div> </td> </tr> <tr> <td class="docs"> <div class="pilwrap"> <a class="pilcrow" href="#section-3" id="section-3">¶</a> </div> Overwrite this method to provide options on a per-element basis. For example, you could store the gravity in a 'tipsy-gravity' attribute: return $.extend({}, options, {gravity: $(ele).attr('tipsy-gravity') || 'n' }); (remember - do not modify 'options' in place!) </td> <td class="code highlight"><div class="highlight"><pre> $.fn.tipsy.elementOptions = function(ele, options) { return $.metadata ? $.extend({}, options, $(ele).metadata()) : options; }; $.fn.tipsy.autoNS = function() { return $(this).offset().top > ($(document).scrollTop() + $(window).height() / 2) ? 's' : 'n'; }; $.fn.tipsy.autoWE = function() { return $(this).offset().left > ($(document).scrollLeft() + $(window).width() / 2<span clas