User:Yair rand/ReferenceTooltips

See Reference Tooltips. Feel free to move this to a better title or modify the content. --Yair rand 05:19, 30 November 2011 (UTC) Still needs the image file for the arrow. There's probably still a bug or two in the script. The "^ a b c" that shows up when a reference is used in multiple places doesn't have a class. Dunno how to removed it...

Go to a page and put the following into a js console or whatever:

$(document).ready(function(c){c(".reference").each(function{function e{c(a).animate({opacity:0},100,function{a.style.display="none"})}function f{a.style.display="block";c(a).stop.animate({opacity:1},100);clearTimeout(d)}var a,d;c(this).hover(function{if(!a){var b=this.firstChild.getAttribute("href"),b=(b=b&&b.substr(1))&&document.getElementById(b);if(!b)return;a=document.body.appendChild(document.createElement("ul"));a.className="zx";a.appendChild(b.cloneNode(!0));a.appendChild(document.createElement("li")); c(a).hover(f,function{d=setTimeout(e,100)})}f;b=c(this).offset;c(a).css({top:b.top-a.offsetHeight,left:b.left-7})},function{d=setTimeout(e,100)})});mw.util.addCSS(".zx{position:absolute;list-style:none;opacity:0;font-size:10px;margin:0;}.zx>li{border:#080086 2px solid;max-width:260px;padding:10px 2px 13px 8px;margin:0px;background-color:#F7F7F7;box-shadow:2px 4px 2px rgba(0,0,0,0.3);-webkit-box-shadow:2px 4px 2px rgba(0,0,0,0.3);}.zx>li>b{display:none;}.zx>li>b~b{display:inline;}.zx>li+li{margin-left:7px;margin-top:-2px;border:0;padding:0;height:14px;width:15px;background-color:#080086;box-shadow:none;-webkit-box-shadow:none;}")});

JS:

$(document).ready(function($){

$(".reference").each(function{	var tooltipNode, timer;	function hide{		timer = setTimeout( function { $(tooltipNode).animate({opacity: 0}, 100, function{tooltipNode.style.display='none'}) }, 100)	}	function show{		tooltipNode.style.display = 'block';		$(tooltipNode).stop.animate({opacity: 1}, 100)		clearTimeout( timer );	}	$(this).hover(function{ if(!tooltipNode){ var h = this.firstChild.getAttribute("href"); h = h && h.substr(1); h = h && document.getElementById( h ); if( !h ){return} tooltipNode = document.body.appendChild( document.createElement("ul") ); tooltipNode.className = "referencetooltip"; tooltipNode.appendChild( h.cloneNode( true ) ); tooltipNode.appendChild( document.createElement( "li" ) ); $(tooltipNode).hover(show, hide); }		show; var o = $(this).offset $(tooltipNode).css({top: o.top - tooltipNode.offsetHeight, left: o.left - 7 }); }, hide) })

})

CSS:

.referencetooltip { position: absolute; list-style: none; opacity: 0; font-size: 10px; margin: 0; } .referencetooltip>li { border: #080086 2px solid; max-width: 260px; padding: 10px 2px 13px 8px; margin: 0px; background-color: #F7F7F7; box-shadow: 2px 4px 2px rgba(0,0,0,0.3); -webkit-box-shadow: 2px 4px 2px rgba(0,0,0,0.3); } .referencetooltip>li>b { display:none; } .referencetooltip>li>b~b { display:inline; } .referencetooltip>li+li { margin-left: 7px; margin-top: -2px; border: 0; padding: 0; height: 14px; width: 15px; background-color: #080086; box-shadow: none; -webkit-box-shadow: none; }