JSFiddle - React, Tailwind, and code Playground

by Trufa

HTML

<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/utility.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/tooltipcontroller.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/outro.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/placementcalculator.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/intro.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/displaycontroller.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/csscoordinates.js"></script>
<script src="https://raw.github.com/stevenbenner/jquery-powertip/master/src/core.js"></script>
<p>
    Blah blah blah blah blah
    <span data-powertiptarget="tip1">Blah</span>
    and more blah blah blah.
</p>

<div id="tip1" class="tooltip-div">
    <p>
        Email: <a href="mailto:[email protected]">[email protected]</a><br/>
        <span data-powertiptarget="tip2">Nomenclature</span>: Blah
    </p>
</div>

<div id="tip2" class="tooltip-div">
    Nomenclature: blah blah blah blah.
</div>

CSS

.tooltip {
    border-bottom: 1px dashed #333333;
}

.tooltip-div {
    display: none;
}

#powerTip {
    text-align: left;
}

#powerTip a {
    color: #FFFFFF;
}

#powerTip a:visited {
    color: #F0F0F0;
}

#powerTip .tooltip {
    border-bottom: 1px dashed #FFFFFF;
}

JavaScript

$('span[data-powertiptarget]').addClass('tooltip');
$('span[data-powertiptarget]').each( function() {
    $(this).powerTip( {
        placement: 'ne',
        mouseOnToPopup: true,
        smartPlacement: true
    });
});