JSFiddle - React, Tailwind, and code Playground

by IagoSRL

HTML

<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js"></script>
<link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css">
<h1>Title 1</h1>
<p>Something about the tip of Title 1 with an annotation to the end<a class="annotation" href="#annotation1">1</a></p>
<h1>Title 2</h1>
<p>What about tip 2? Some notes<a class="annotation" href="#annotation2">2</a> at the end<a href="#annotation3" class="annotation">3</a></p>
<h2>Foot notes</h2>
<ol class="annotations">
    <li id="annotation1">An example of foot note</li>
    <li id="annotation2">A second example of annotation at the end</li>
    <li id="annotation3">Last example, any more?</li>
</ol>

CSS

.annotation{
    vertical-align: super;
    margin: 0 2px;
}

.annotation:before{
    content:'[';
}
.annotation:after{
    content:']';
}
.annotations{
    margin: 10px;
}

JavaScript

/* Generates tooltips in the text annotation anchors with the content of the annotation.
@param annotationClass: the css class used to set an anchor like annotation*/
function tooltipAnnotations(annotationClass){
    $('.' + annotationClass).each(function(){
        $(this).tooltip({ 
            bodyHandler: function() { 
                return $(this.getAttribute('href')).html();
            },
            showURL: false 
        });
    });
}

$(function(){tooltipAnnotations('annotation')});