implements tooltips
This commit is contained in:
Sanj
parent
b3fd385d09
commit
ba079a4ae9
|
|
@ -2,11 +2,18 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" type="text/css" href="radia.css" />
|
<link rel="stylesheet" type="text/css" href="radia.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="jquery.tooltip.css" />
|
||||||
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
|
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
|
||||||
|
<script type="text/javascript" src="jquery.tooltip.js"></script>
|
||||||
<script type="text/javascript" src="radia.js"></script>
|
<script type="text/javascript" src="radia.js"></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<!--
|
||||||
|
<div id="tooltip">
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
|
|
||||||
<svg width="1220" height="560" viewBox="84 159 1215 560" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
<svg width="1220" height="560" viewBox="84 159 1215 560" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
<text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="570.616" y="237">
|
<text style="fill: #000000;text-anchor:start;font-size:12.8px;font-family:sans-serif;font-style:normal;font-weight:normal" x="570.616" y="237">
|
||||||
<tspan x="570.616" y="237"></tspan>
|
<tspan x="570.616" y="237"></tspan>
|
||||||
|
|
|
||||||
9
jquery.tooltip.css
Normal file
9
jquery.tooltip.css
Normal file
|
|
@ -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; }
|
||||||
294
jquery.tooltip.js
Normal file
294
jquery.tooltip.js
Normal file
|
|
@ -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;
|
||||||
|
}
|
||||||
41
radia.js
41
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"));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user