JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<p>The <span class="tooltip">WHO<span class="tip">World Health Organization</span></span> was established in 1948.</p>

    <p>
        It is part of the
        <span class="tooltip">UN
            <span class="tip">United Nations, <br>the successor of the <br>League of Nations</span>
        </span>,
        which was established in 1945.
    </p>

CSS

span.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dashed black;
}

span.tip {
    position: absolute;
    bottom: 20px;
    left: 0px;
    display: block;
    width: auto;
    white-space: nowrap;
    font-size: .9em;
    border: 1px solid black; /* change as desired */
    border-radius: 6px;
    padding: 1px 5px;
    background: #f2f2f2;
    zoom: 1;
    visibility: hidden;
}

JavaScript

var tooltips = document.querySelectorAll('.tooltip');
for (var i=0; i<tooltips.length; i++) {
    var tooltip = tooltips[i];
    if ('ontouchstart' in window || window.navigator.msPointerEnabled) {
        tooltip.onclick = function() {
            if (this.children[0].style.visibility == '' || this.children[0].style.visibility == 'hidden')
                this.children[0].style.visibility = 'visible';
            else this.children[0].style.visibility = 'hidden';
        }
    }
    else {
        tooltip.onmouseover = function() {
            this.children[0].style.visibility = 'visible';
        }
        tooltip.onmouseout = function() {
            this.children[0].style.visibility = 'hidden';
        }
    }
}