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)

There's probably still a bug or two in the script.

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

$(document).ready(function(c){c(".reference").each(function{function e{d=setTimeout(function{c(b).animate({opacity:0},100,function{document.body.removeChild(b)})},100)}function f{document.body.appendChild(b);c(b).stop.animate({opacity:1},100);clearTimeout(d)}var b,d;c(this).hover(function{var d=c(this).offset;if(!b){var a=this.firstChild.getAttribute("href"),a=(a=a&&a.substr(1))&&document.getElementById(a);if(!a)return;b=document.createElement("ul");b.className="referencetooltip"; a=b.appendChild(a.cloneNode(!0));try{if("A"!=a.firstChild.nodeName)for("A"==a.childNodes[1].nodeName&&0==a.childNodes[1].getAttribute("href").indexOf("#cite_ref-");){do a.removeChild(a.childNodes[1]);while(" "==a.childNodes[1].nodeValue)}}catch(g){mw.log(g)}a.removeChild(a.firstChild);b.appendChild(document.createElement("li"));c(b).hover(f,e)}f;c(b).css({top:d.top-b.offsetHeight,left:d.left-7})},e)})});mw.util.addCSS(".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:3px;width:0px;background-color:transparent;box-shadow:none;-webkit-box-shadow:none;border-top:12px #080086 solid;border-right:7px transparent solid;border-left:7px transparent solid;}.referencetooltip>li+li::after{content:'';border-top:8px #F7F7F7 solid;border-right:5px transparent solid;border-left:5px transparent solid;margin-top:-12px;margin-left:-5px;z-index:1;height:0px;width:0px;display:block;}");

JS:

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

$(".reference").each(function{	var tooltipNode, timer;	function hide{		timer = setTimeout( function { $(tooltipNode).animate({opacity: 0}, 100, function{ document.body.removeChild( tooltipNode ) }) }, 100)	}	function show{		document.body.appendChild( tooltipNode );		$(tooltipNode).stop.animate({opacity: 1}, 100)		clearTimeout( timer );	}	$(this).hover(function{ var o = $(this).offset; if(!tooltipNode){ var h = this.firstChild.getAttribute("href"); h = h && h.substr(1); h = h && document.getElementById( h ); if( !h ){return} tooltipNode = document.createElement("ul"); tooltipNode.className = "referencetooltip"; var c = tooltipNode.appendChild( h.cloneNode( true ) ); try { if( c.firstChild.nodeName != "A" ) { while( c.childNodes[1].nodeName == "A" && c.childNodes[1].getAttribute( "href" ).indexOf("#cite_ref-") == 0 ) { do { c.removeChild( c.childNodes[1] ) } while ( c.childNodes[1].nodeValue == " " ); }				}			} catch (e) { mw.log(e) } c.removeChild( c.firstChild ); tooltipNode.appendChild( document.createElement( "li" ) ); $(tooltipNode).hover(show, hide); }		show; $(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: 3px; width: 0px; background-color: transparent; box-shadow: none; -webkit-box-shadow: none; border-top: 12px #080086 solid; border-right: 7px transparent solid; border-left: 7px transparent solid; } .referencetooltip>li+li::after { content: ''; border-top: 8px #F7F7F7 solid; border-right: 5px transparent solid; border-left: 5px transparent solid; margin-top: -12px; margin-left: -5px; z-index: 1; height: 0px; width: 0px; display: block; }