JSFiddle - React, Tailwind, and code Playground

Tooltipster

by Jennifer Perrin

HTML

<section>
    <article>
         <h3>The places you don't need to seek the holy grail in</h3>

        <p>In today's podcast I, <span class="note tooltip" title="<i>King Arthur</i> — son of Uther Pendragon, from the castle of Camelot, king of the Britons, defeater of the Saxons, Sovereign of all England.">King Arthur,</span> shall discuss the following topics: how to indentify a witch and what to do next, why Camelot is <span class="note tooltip" title="Don't go to it, seriously...">a silly place</span> and all you want to know about air-speed velocity of an unladen swallow. The special guest of today is Knight of Ni. Oh, and I'll try to comment the last French soldiers' <span class="note tooltip" title="You don't frighten us, English pig dogs. Go and boil your bottoms, you sons of a silly person. I blow my nose at you, so-called «Arthur King,» you and all your silly English K-nig-hts. I don't want to talk to you no more, you empty headed animal food trough wiper. I fart in your general direction. Your mother was a hamster and your father smelt of elderberries.">message</span> and dispel a few myths about my dear parents.</p>
    </article>
</section>

CSS

body {
    font: 20px/1.750em"Georgia", serif;
    background: #f5f5f5;
    color: #222;
    list-style-type: circle;
}
section {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px 100px;
    background: #fff;
}
h3 {
    font: 2em/1.250em "Georgia", serif;
}
.note {
    color: #d0745f;
    cursor: help;
    border-bottom: 1px dotted #d0745f;
}
/* This is the default Tooltipster theme (feel free to modify or duplicate and create multiple themes!): */
 .tooltipster-default {
    border-radius: 1px;
    border: 1px solid #eee;
    background: #fff;
    color: #222;
}
/* Use this next selector to style things like font-size and line-height: */
 .tooltipster-default .tooltipster-content {
    font: 16px/24px"Georgia", serif;
    padding: 1em 1em 1em 1em;
    overflow: hidden;
    border-left: 5px solid #d0745f;
}
/* This next selector defines the color of the border on the outside of the arrow. This will automatically match the color and size of the border set on the main tooltip styles. Set display: none; if you would like a border around the tooltip but no border around the arrow */
 .tooltipster-default .tooltipster-arrow .tooltipster-arrow-border {
    /* border-color: ... !important; */
}
/* If you're using the icon option, use this next selector to style them */
 .tooltipster-icon {
    cursor: help;
    margin-left: 4px;
}
/* This is the base styling required to make all Tooltipsters work */
 .tooltipster-base {
    padding: 0;
    font-size: 0;
    line-height: 0;
    position: absolute;
    z-index: 9999999;
    pointer-events: none;
    width: auto;
    overflow: visible;
}
.tooltipster-base .tooltipster-content {
    overflow: hidden;
}
/* These next classes handle the styles for the little arrow attached to the tooltip. By default, the arrow will inherit the same colors and border as what is set on the main tooltip itself. */
 .tooltipster-arrow {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    position:...

JavaScript

/*

Tooltipster 2.1 | 2/12/13
A rockin' custom tooltip jQuery plugin

Developed by: Caleb Jacob - calebjacob.com
Copyright (C) 2013 Caleb Jacob

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

;
(function ($, window, document, undefined) {

    var pluginName = "tooltipster",
        defaults = {
            animation: 'fade',
            arrow: true,
            arrowColor: '',
            content: '',
            delay: 100,
            fixedWidth: 0,
            maxWidth: 0,
            functionBefore: function (origin, continueTooltip) {
                continueTooltip();
            },
            functionReady: function (origin, tooltip) {},
            functionAfter: function (origin) {},
            icon: '(?)',
            iconDesktop: false,
            iconTouch: false,
            iconTheme: '.tooltipster-icon',
            interactive: false,
            interactiveTolerance: 350,
            offsetX: 0,
            offsetY: 0,
            onlyOne: true,
            position: 'top',
            speed: 350,
            timer: 0,
            theme: '.tooltipster-default',
            touchDevices: true,
            trigger: 'click',
            updateAnimation: true
        };

    function Plugin(element, options) {
        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    // we'll use this to detect for mobile devices
    function is_touch_device() {
        return !!('ontouchstart' in window);
    }

    //...