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)

Update: This has been moved to w:User:Yair rand/ReferenceTooltips.js and w:User:Yair rand/ReferenceTooltips.css. Further revisions will take place there. 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){(""===wgCanonicalNamespace||"Project"===wgCanonicalNamespace||"Help"===wgCanonicalNamespace)&&c(".reference").each(function{function e(a){var j;var i;var h;return j=(i=(h=(a=a.firstChild.getAttribute("href"))&&a.split("#"),a=h)&&a[1],a=i)&&document.getElementById(a),a=j}function f{if(b&&b.parentNode==document.body)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|| 11===b.parentNode.nodeType)&&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&&-1!==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 8px 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+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($) {

// Make sure we are in article, project, or help namespace if ( wgCanonicalNamespace === '' || wgCanonicalNamespace === 'Project' || wgCanonicalNamespace === 'Help' ) { $(".reference").each( function {           var tooltipNode, timer;            function findRef( h ){                    h = h.firstChild.getAttribute("href"); h = h && h.split("#"); h = h && h[1];                    h = h && document.getElementById( h );                    return h;            }            function hide{                    if( tooltipNode && tooltipNode.parentNode == document.body ) {                            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 || tooltipNode.parentNode.nodeType === 11 ){                            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-") !== -1 ) { 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 8px 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+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; }