How XKCD What If? does tooltip text.

README.md

This is how XKCD What If? does reference links, as seen on https://what-if.xkcd.com/130/. The code is directly copied from their site, so you should probably change it.

The tooltip works best if the text is short. You can insert links in the tooltip.

CSS

/* the reference tooltips style starts here */

.ref {
    position: relative;
    vertical-align: baseline;
   }

.refnum {
    position: relative;
    left: 2px;
    bottom: 1ex;
    font-family: Verdana, sans-serif;
    color: #005994;
    font-size: .7em;
    font-weight: bold;
    text-decoration: underline;
    cursor: pointer;
}

.refbody {
    font-family: Verdana, sans-serif;
    font-size: .7em;
    line-height: 1.1;
    display: block;
    min-width: 20em;
    position: absolute;
    left: 25px;
    bottom: 5px ;
    border: 1px solid;
    padding: 5px;
    background-color: #fff;
    word-wrap: break-word;
    z-index: 9999;
    overflow: auto;
}

CSS-inject

Add this to your WordPress page in the text editor. It's the same as above, with all the `\n` newlines removed. If you don't remove the newlines, WordPress will inject `<p>` tags inside your CSS, breaking it.

<style type="text/css">/* the reference tooltips style starts here */  .ref {     position: relative;     vertical-align: baseline;    }  .refnum {     position: relative;     left: 2px;     bottom: 1ex;     font-family: Verdana, sans-serif;     color: #005994;     font-size: .7em;     font-weight: bold;     text-decoration: underline;     cursor: pointer; }  .refbody {     font-family: Verdana, sans-serif;     font-size: .7em;     line-height: 1.1;     display: block;     min-width: 20em;     position: absolute;     left: 25px;     bottom: 5px ;     border: 1px solid;     padding: 5px;     background-color: #fff;     word-wrap: break-word;     z-index: 9999;     overflow: auto; }</style>

HTML

Here's a paragraph.

Here's a paragraph, but it has a citation copied from What If!<span class="ref"><span class="refnum">[1]</span><span class="refbody">Meanwhile, Anchorage is on Twitter <a href="https://twitter.com/NWSBoston/status/567172928593485824">wondering</a> where their snow went and <a href="https://twitter.com/NWSAnchorage/status/567566488517619712">threatening revenge</a>. <a href="https://twitter.com/EricHolthaus/status/567350490912931840">Here&#39;s</a> a neat visualization of the atmospheric pattern during these polar vortexes. Vortices. Whatever.</span></span>

Here's another paragraph

reference.js.html

Add this inside a <script> at the bottom of your story

<script>
jQuery.noConflict();
jQuery(function() {
jQuery(".refbody").hide();
jQuery(".refnum").click(function(event) {
  jQuery(this.nextSibling).toggle();
  event.stopPropagation();
});
jQuery("body").click(function(event) {
  jQuery(".refbody").hide();
});
});
</script>