JSFiddle - React, Tailwind, and code Playground

by batya15

JavaScript

(function ($) {
    var tooltip = function (text) {
        return "<div class='tooltip'>" + text + "</div>";
    };

    var arrTooltip = [];

    var CONFIG = {
        time: 5000,
        clickEl: true,
        clickTT: true,
        cssClass: null
    };

    function remove(el) {
        el.off('mousedown.tooltip');
        arrTooltip.forEach(function (element, i) {
            var hash = el.attr('data-tooltip-hash');
            if (element.hash == hash) {
                clearTimeout(element.timer);
                element.tooltip.remove();
                arrTooltip.splice(i, 1);
            }
        }, this);
    }

    $.fn.tooltip = function (text, params) {
        var el = $(this).eq(0),
            toolTipLoc,
            timer,
            hash = new Date().getTime(),
            options;

        if (typeof params == 'number') {
            options = $.extend(true, {}, CONFIG, {time: params});
        } else {
            options = $.extend(true, {}, CONFIG, params);
        }

        if (!text) {
            if (el.data('tooltip')) {
                text = el.data('tooltip');
            } else {
                return this;
            }
        }

        remove(el);
        toolTipLoc = $(tooltip(text));

        toolTipLoc.css({visibility: 'hidden'});

        if (options.cssClass) {
            toolTipLoc.addClass(options.cssClass);
        }

        el.after(toolTipLoc).attr('data-tooltip-hash', hash);

        toolTipLoc.ready(function () {
            var left = el.position().left,
                top = el.position().top,
                right = left + el.width(),
                bottom = top + el.height(),
                doc_w = $(document).width(),
                doc_h = $(document).height(),
                too_h = toolTipLoc.height(),
                too_w = toolTipLoc.width(),
                cssClass,
                x,
                y;

            if (((doc_w - right) > too_w) && (doc_h - top > too_h)) {
               ...