Untitled

<!doctype html>
<html lang="en">
<title>snote example</title>
<meta charset="utf-8">

<!-- Placed in the public domain by Roger Hågensen. -->
<style>
.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;
}

.snote_tip:hover
{
    cursor: default;
}
</style>

<script>
    //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(i)
            {
                var snote_element = snote_elements[i];

                snote_element.innerHTML = '<span class="snote_tip" id="snote_' + i + '">' + snote_element.innerHTML + '</span>';
                snote_element.style.display = 'inline-block';
                snote_element.addEventListener ("mouseup", function () {snote_show(i)}, false);
            })(i);
        }
    }

    function snote_show(arg)
    {
        var snote_tip = document.getElementById('snote_' + arg);
        var rect = snote_tip.getBoundingClientRect();

        snote_tip.style.top = 'auto';
        snote_tip.style.left = 'auto';
        snote_tip.style.marginLeft = '-' + (rect.width / 2) + 'px';
        snote_tip.style.marginTop = '-' + (rect.height / 2) + 'px';
        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';
            snote_tip.style.marginLeft = '0px';
        }
        if (y1 < 0)
        {
            snote_tip.style.top = '0px';
            snote_tip.style.marginTop = '0px';
        }
        if (x2 < 0)
        {
            snote_tip.style.left = (window.innerWidth-rect.width) + 'px';
            snote_tip.style.marginLeft = '0px';
        }
        if (y2 < 0)
        {
            snote_tip.style.left = (window.innerHeight-rect.height) + 'px';
            snote_tip.style.marginLeft = '0px';
        }

        if (snote_tip.style.visibility == 'visible')
        {
            snote_tip.style.visibility = 'hidden';
        }
        else
        {
            snote_tip.style.visibility = 'visible';
        }
    };
</script>

<body>

<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>

</body>
</html>