JSFiddle - React, Tailwind, and code Playground

HTML

<!-- snote v5. Placed in the public domain by Roger HÃ¥gensen. -->
<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;
	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;
}

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)
		{
			(function(ii)
			{
				var snote_element = snote_elements[ii];
				var node = document.createElement('span');
				node.className = 'snote_tip';
				var text = snote_element.innerHTML;
				snote_element.innerHTML = '';
				node.innerHTML = text;
				snote_element.appendChild(node);
				snote_element.style.display = 'inline-block';
				snote_element.addEventListener ("mouseup", function () {snote_show(snote_element, node)}, false);
			})(i);
		}
	}

	function snote_show(snote_element, snote_tip)
	{
		if (snote_tip.style.visibility == 'visible')
		{
			snote_tip.style.visibility = 'hidden';
			return;
		}
		else
		{
			snote_tip.style.visibility = 'visible';
		}

		var rect = snote_element.getBoundingClientRect();
		x0 = rect.left + (rect.width * 0.5);
		y0 = rect.top + (rect.height * 0.5);

		var rect = snote_tip.getBoundingClientRect();
		snote_tip.style.left = (x0 - (rect.width / 2)) + 'px';
		snote_tip.style.top = (y0 - (rect.height / 2)) + 'px';

		snote_tip.style.cursor = 'auto';

		var rect = snote_tip.getBoundingClientRect();
		x1 = rect.left;
		y1 = rect.top;
		x2 = window.innerWidth - rect.right
		y2 = window.innerHeight - rect.bottom
		if (x1 < 0)
		{
			snote_tip.style.left = '0px';
		}
		if (y1 < 0)
		{
			snote_tip.style.top = '0px';
		}
		if (x2 < 0)
		{
			snote_tip.style.left = (window.innerWidth-rect.width) + 'px';
		}
		if (y2 < 0)
		{
			snote_tip.style.left = (window.innerHeight-rect.height) + 'px';
		}

	};