Sanj
13 years ago
5 changed files with 357 additions and 0 deletions
@ -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; } |
@ -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 = $('<div id="' + settings.id + '"><h3></h3><div class="body"></div><div class="url"></div></div>') |
|||
// 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("<br/>"); |
|||
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); |
@ -0,0 +1,6 @@ |
|||
#tooltip { |
|||
padding: 4px; |
|||
border: 1px solid #000; |
|||
position: absolute; |
|||
display: none; |
|||
} |
@ -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")); |
|||
}); |
|||
} |
|||
}); |
|||
}); |
|||
}); |
Loading…
Reference in new issue