From ba079a4ae93d3debe61adcc6dbba6627055f3a89 Mon Sep 17 00:00:00 2001 From: Sanj Date: Fri, 24 Jun 2011 21:15:19 +0530 Subject: [PATCH] implements tooltips --- index.html | 7 ++ jquery.tooltip.css | 9 ++ jquery.tooltip.js | 294 +++++++++++++++++++++++++++++++++++++++++++++ radia.css | 6 + radia.js | 41 +++++++ 5 files changed, 357 insertions(+) create mode 100644 jquery.tooltip.css create mode 100644 jquery.tooltip.js diff --git a/index.html b/index.html index 124844a..9d2e702 100644 --- a/index.html +++ b/index.html @@ -2,11 +2,18 @@ + + + + diff --git a/jquery.tooltip.css b/jquery.tooltip.css new file mode 100644 index 0000000..77d0357 --- /dev/null +++ b/jquery.tooltip.css @@ -0,0 +1,9 @@ +#tooltip { + position: absolute; + z-index: 3000; + border: 1px solid #111; + background-color: #eee; + padding: 5px; + opacity: 0.85; +} +#tooltip h3, #tooltip div { margin: 0; } diff --git a/jquery.tooltip.js b/jquery.tooltip.js new file mode 100644 index 0000000..63b715f --- /dev/null +++ b/jquery.tooltip.js @@ -0,0 +1,294 @@ +/* + * jQuery Tooltip plugin 1.3 + * + * http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ + * http://docs.jquery.com/Plugins/Tooltip + * + * Copyright (c) 2006 - 2008 Jörn Zaefferer + * + * $Id: jquery.tooltip.js 5741 2008-06-21 15:22:16Z joern.zaefferer $ + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + */ + +;(function($) { + + // the tooltip element + var helper = {}, + // the current tooltipped element + current, + // the title of the current element, used for restoring + title, + // timeout id for delayed tooltips + tID, + // IE 5.5 or 6 + IE = $.browser.msie && /MSIE\s(5\.5|6\.)/.test(navigator.userAgent), + // flag for mouse tracking + track = false; + + $.tooltip = { + blocked: false, + defaults: { + delay: 200, + fade: false, + showURL: true, + extraClass: "", + top: 15, + left: 15, + id: "tooltip" + }, + block: function() { + $.tooltip.blocked = !$.tooltip.blocked; + } + }; + + $.fn.extend({ + tooltip: function(settings) { + settings = $.extend({}, $.tooltip.defaults, settings); + createHelper(settings); + return this.each(function() { + $.data(this, "tooltip", settings); + this.tOpacity = helper.parent.css("opacity"); + // copy tooltip into its own expando and remove the title + this.tooltipText = this.title; + $(this).removeAttr("title"); + // also remove alt attribute to prevent default tooltip in IE + this.alt = ""; + }) + .mouseover(save) + .mouseout(hide) + .click(hide); + }, + fixPNG: IE ? function() { + return this.each(function () { + var image = $(this).css('backgroundImage'); + if (image.match(/^url\(["']?(.*\.png)["']?\)$/i)) { + image = RegExp.$1; + $(this).css({ + 'backgroundImage': 'none', + 'filter': "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='" + image + "')" + }).each(function () { + var position = $(this).css('position'); + if (position != 'absolute' && position != 'relative') + $(this).css('position', 'relative'); + }); + } + }); + } : function() { return this; }, + unfixPNG: IE ? function() { + return this.each(function () { + $(this).css({'filter': '', backgroundImage: ''}); + }); + } : function() { return this; }, + hideWhenEmpty: function() { + return this.each(function() { + $(this)[ $(this).html() ? "show" : "hide" ](); + }); + }, + url: function() { + return this.attr('href') || this.attr('src'); + } + }); + + function createHelper(settings) { + // there can be only one tooltip helper + if( helper.parent ) + return; + // create the helper, h3 for title, div for url + helper.parent = $('

') + // add to document + .appendTo(document.body) + // hide it at first + .hide(); + + // apply bgiframe if available + if ( $.fn.bgiframe ) + helper.parent.bgiframe(); + + // save references to title and url elements + helper.title = $('h3', helper.parent); + helper.body = $('div.body', helper.parent); + helper.url = $('div.url', helper.parent); + } + + function settings(element) { + return $.data(element, "tooltip"); + } + + // main event handler to start showing tooltips + function handle(event) { + // show helper, either with timeout or on instant + if( settings(this).delay ) + tID = setTimeout(show, settings(this).delay); + else + show(); + + // if selected, update the helper position when the mouse moves + track = !!settings(this).track; + $(document.body).bind('mousemove', update); + + // update at least once + update(event); + } + + // save elements title before the tooltip is displayed + function save() { + // if this is the current source, or it has no title (occurs with click event), stop + if ( $.tooltip.blocked || this == current || (!this.tooltipText && !settings(this).bodyHandler) ) + return; + + // save current + current = this; + title = this.tooltipText; + + if ( settings(this).bodyHandler ) { + helper.title.hide(); + var bodyContent = settings(this).bodyHandler.call(this); + if (bodyContent.nodeType || bodyContent.jquery) { + helper.body.empty().append(bodyContent) + } else { + helper.body.html( bodyContent ); + } + helper.body.show(); + } else if ( settings(this).showBody ) { + var parts = title.split(settings(this).showBody); + helper.title.html(parts.shift()).show(); + helper.body.empty(); + for(var i = 0, part; (part = parts[i]); i++) { + if(i > 0) + helper.body.append("
"); + helper.body.append(part); + } + helper.body.hideWhenEmpty(); + } else { + helper.title.html(title).show(); + helper.body.hide(); + } + + // if element has href or src, add and show it, otherwise hide it + if( settings(this).showURL && $(this).url() ) + helper.url.html( $(this).url().replace('http://', '') ).show(); + else + helper.url.hide(); + + // add an optional class for this tip + helper.parent.addClass(settings(this).extraClass); + + // fix PNG background for IE + if (settings(this).fixPNG ) + helper.parent.fixPNG(); + + handle.apply(this, arguments); + } + + // delete timeout and show helper + function show() { + tID = null; + if ((!IE || !$.fn.bgiframe) && settings(current).fade) { + if (helper.parent.is(":animated")) + helper.parent.stop().show().fadeTo(settings(current).fade, current.tOpacity); + else + helper.parent.is(':visible') ? helper.parent.fadeTo(settings(current).fade, current.tOpacity) : helper.parent.fadeIn(settings(current).fade); + } else { + helper.parent.show(); + } + update(); + } + + /** + * callback for mousemove + * updates the helper position + * removes itself when no current element + */ + function update(event) { + if($.tooltip.blocked) + return; + + if (event && event.target.tagName == "OPTION") { + return; + } + + // stop updating when tracking is disabled and the tooltip is visible + if ( !track && helper.parent.is(":visible")) { + $(document.body).unbind('mousemove', update) + } + + // if no current element is available, remove this listener + if( current == null ) { + $(document.body).unbind('mousemove', update); + return; + } + + // remove position helper classes + helper.parent.removeClass("viewport-right").removeClass("viewport-bottom"); + + var left = helper.parent[0].offsetLeft; + var top = helper.parent[0].offsetTop; + if (event) { + // position the helper 15 pixel to bottom right, starting from mouse position + left = event.pageX + settings(current).left; + top = event.pageY + settings(current).top; + var right='auto'; + if (settings(current).positionLeft) { + right = $(window).width() - left; + left = 'auto'; + } + helper.parent.css({ + left: left, + right: right, + top: top + }); + } + + var v = viewport(), + h = helper.parent[0]; + // check horizontal position + if (v.x + v.cx < h.offsetLeft + h.offsetWidth) { + left -= h.offsetWidth + 20 + settings(current).left; + helper.parent.css({left: left + 'px'}).addClass("viewport-right"); + } + // check vertical position + if (v.y + v.cy < h.offsetTop + h.offsetHeight) { + top -= h.offsetHeight + 20 + settings(current).top; + helper.parent.css({top: top + 'px'}).addClass("viewport-bottom"); + } + } + + function viewport() { + return { + x: $(window).scrollLeft(), + y: $(window).scrollTop(), + cx: $(window).width(), + cy: $(window).height() + }; + } + + // hide helper and restore added classes and the title + function hide(event) { + if($.tooltip.blocked) + return; + // clear timeout if possible + if(tID) + clearTimeout(tID); + // no more current element + current = null; + + var tsettings = settings(this); + function complete() { + helper.parent.removeClass( tsettings.extraClass ).hide().css("opacity", ""); + } + if ((!IE || !$.fn.bgiframe) && tsettings.fade) { + if (helper.parent.is(':animated')) + helper.parent.stop().fadeTo(tsettings.fade, 0, complete); + else + helper.parent.stop().fadeOut(tsettings.fade, complete); + } else + complete(); + + if( settings(this).fixPNG ) + helper.parent.unfixPNG(); + } + +})(jQuery); diff --git a/radia.css b/radia.css index e69de29..4730c79 100644 --- a/radia.css +++ b/radia.css @@ -0,0 +1,6 @@ +#tooltip { + padding: 4px; + border: 1px solid #000; + position: absolute; + display: none; +} diff --git a/radia.js b/radia.js index e69de29..d0003bc 100644 --- a/radia.js +++ b/radia.js @@ -0,0 +1,41 @@ +var R; + +$(function() { + $.getJSON("radia.json", {}, function(data) { + R = data; + $('text').each(function() { + var $tspan = $(this).children('tspan').eq(0); + var key = $.trim($tspan.text()); + if (R.hasOwnProperty(key)) { + thisData = R[key]; + var $this = $(this); +// $this.data("r", thisData); + $this.data("name", thisData.name); + $this.data("type", thisData.type); + $this.data("link", thisData.link); + + $this.tooltip({ + 'delay': 0, + 'showURL': false, + 'bodyHandler': function() { + return $(this).data("name"); + } + }); +/* + $this.mouseover(function(e) { + var tooltipText = $(this).data("name"); +// console.log(tooltipText); + $('#tooltip').text(tooltipText).css({'left': e.clientX + "px", "top": e.clientY + "px"}).show(); + }); + + $this.mouseout(function(e) { + $('#tooltip').hide(); + }); +*/ + $this.click(function() { + console.log($(this).data("link")); + }); + } + }); + }); +});