Instantly share code, notes, and snippets.

@benlk /CSS
Last active Aug 29, 2015

Embed
What would you like to do?
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