JSFiddle - React, Tailwind, and code Playground

HTML

<br><br>
<p>But the thing is this: I really, REALLY like annotations. I'm talking about the little numbers that pop up in a post <span class="snote">Like this one, for example.<br><br>And it is really long, but that is not really a problem.<br><br>This text could easily just go on and on.</span>. I ran into them on the <a href="http://what-if.xkcd.com/">XKCD What-If blog</a>.  They're great for expanding on a side-thought without cluttering up the main body of the article. They're handy when writing faux-technical articles that require lots of footnotes to save me from Death By Nitpick. They're great for jokes <span class="snote">Since you can hide the <a href="http://en.wikipedia.org/wiki/Punch_line">punchline</a>.</span>. </p>

CSS

.snote
{
	width: 1em;
	height: 1em;
	background-image: url('http://icons.iconarchive.com/icons/visualpharm/must-have/256/Information-icon.png');
	background-size: auto 1em;
	background-repeat: no-repeat;
	display: none;
	cursor: help
}

.snote_tip
{
	display: block;
	visibility: hidden;
	position: absolute;
	width: 16em;
	height: 3em;
	margin-left: -8em;
	margin-top: -4em;
	padding: 0.5em;
	overflow: auto;
	background: #cccccc;
	color: #000000;
	border: 0.15em solid #000000;
	border-radius: 0.25em;  
	box-shadow: 0.25em 0.25em 0.25em #7f7f7f;
}

.snote:hover .snote_tip
{
	visibility: visible;
	cursor: default;
}

JavaScript

//call this function once the page has loaded
	window.addEventListener('load', snote_init, false);

	//this function will add a span with snote_tip class where a span with the snote class is used, this reduces the html needed and makes writing notes so much simpler/cleaner.
	function snote_init()
	{
		var snote_elements = document.getElementsByClassName('snote');
		for (var i = 0; i < snote_elements.length; i += 1)
		{
			var snote_element = snote_elements[i];
			snote_element.innerHTML = '<span class="snote_tip">' + snote_element.innerHTML + '</span>';
			snote_element.style.display = 'inline-block';
		}
	}