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. I still need to think up actual names for the variables and the CSS class, and there's probably 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 x, t;	function hide{		$(x).animate({opacity: 0}, 100, function{x.style.display='none'})	}	function show{		x.style.display = 'block';		$(x).stop.animate({opacity: 1}, 100)		clearTimeout( t );	}	$(this).hover(function{ if(!x){ var h = this.firstChild.getAttribute("href"); h = h && h.substr(1); h = h && document.getElementById( h ); if( !h ){return} x = document.body.appendChild( document.createElement("ul") ); x.className = "zx"; x.appendChild( h.cloneNode( true ) ); x.appendChild( document.createElement( "li" ) ); $(x).hover(show, function{ t = setTimeout( hide, 100 ) }); }		show; var o = $(this).offset $(x).css({top: o.top - x.offsetHeight, left: o.left - 7 }); }, function{ t = setTimeout( hide, 100 ) }) })

})

CSS:

.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; }