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(a){var i;var h;return i=(h=(a=a.firstChild.getAttribute("href"))&&a.substr(1),a=h)&&document.getElementById(a),a=i}function f{if(b&&b.parentNode)d=setTimeout(function{c(b).animate({opacity:0},100,function{document.body.removeChild(b)})},100);else{var a=e(this);a&&(a.style.border="")}}function g{b.parentNode||document.body.appendChild(b);c(b).stop.animate({opacity:1},100);clearTimeout(d)}var b,d;c(this).hover(function{var a= e(this);if(a)if(document.body.scrollTop+screen.availHeight>c(a).offset.top)a.style.border="#080086 2px solid";else{if(!b){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(d){mw.log(d)}a.removeChild(a.firstChild);b.appendChild(document.createElement("li")); c(b).hover(g,f)}g;a=c(this).offset;c(b).css({top:a.top-b.offsetHeight,left:a.left-7})}},f)})});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 findRef( h ){		h = h.firstChild.getAttribute("href"); h = h && h.substr(1);		h = h && document.getElementById( h );		return h;	}	function hide{		if( tooltipNode && tooltipNode.parentNode ) {			timer = setTimeout( function { $(tooltipNode).animate({opacity: 0}, 100, function{ document.body.removeChild( tooltipNode ) }) }, 100)		} else {			var h = findRef( this );			h && (h.style.border = "");		}	}	function show{		if( !tooltipNode.parentNode ){			document.body.appendChild( tooltipNode );		}		$(tooltipNode).stop.animate({opacity: 1}, 100)		clearTimeout( timer );	}	$(this).hover(function{ var h = findRef( this ); if( !h ){return}; if( document.body.scrollTop + screen.availHeight > $( h ).offset.top ) { h.style.border = "#080086 2px solid"; return; }		if(!tooltipNode){ 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; 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: 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; }