snote example

<!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: inline-block;
    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;
}
</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)
        {
            var snote_element = snote_elements[i];
            snote_element.innerHTML = '<span class="snote_tip">' + snote_element.innerHTML + '</span>';
        }
    }
</script>

<body>

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

</body>
</html>