Skip to content

Instantly share code, notes, and snippets.

@benlk
Last active August 29, 2015 14:16
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save benlk/a9d85f082a4f48362f85 to your computer and use it in GitHub Desktop.
How XKCD What If? does tooltip text.

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.

/* 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;
}
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>
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
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment