JSFiddle - React, Tailwind, and code Playground

by Scott Kaye

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-tooltip="Some tooltip here">
    <symbol id="symbol1" viewBox="0 0 93 93" width="50" height="50">
        <path fill="#50748A" d="M50.1,27.5c-0.9,0-1.7-0.3-2.2-0.9C47.3,26,47,25.2,47,24.2c0-1.4,0.5-2.7,1.4-3.8c0.9-1.1,2-1.7,3.3-1.7
	c1,0,1.7,0.3,2.1,1s0.6,1.5,0.6,2.6c0,1.3-0.4,2.5-1.3,3.6C52.4,26.9,51.4,27.5,50.1,27.5L50.1,27.5z M46.3,64
	c0,0.2-0.1,0.5-0.1,0.8c0,0.3-0.1,0.6-0.1,0.7c0,0.6,0.3,0.9,0.9,0.9c0.3,0,0.7-0.1,1.1-0.3c0.4-0.2,0.7-0.4,1.1-0.6
	c0.4-0.2,0.7-0.4,1-0.6s0.5-0.3,0.7-0.3c0.5,0,0.8,0.5,1,1.6c-0.8,0.7-1.8,1.3-2.7,1.9c-1,0.6-1.9,1.1-2.8,1.6s-1.7,0.8-2.5,1.1
	c-0.8,0.3-1.4,0.4-1.9,0.4c-0.5,0-1.1-0.1-1.6-0.4s-0.7-0.8-0.7-1.7c0-0.2,0-0.4,0.1-0.8c0-0.4,0.1-0.7,0.1-0.8
	c1.1-5.6,2-10,2.6-13.3c0.6-3.3,1.1-5.8,1.5-7.6c0.3-1.7,0.5-2.9,0.6-3.5c0.1-0.6,0.1-0.9,0.1-1c0-0.6-0.2-0.9-0.7-0.9
	c-0.2,0-0.5,0.1-0.9,0.3c-0.4,0.2-0.8,0.4-1.3,0.5c-0.4,0.2-0.9,0.4-1.2,0.5c-0.4,0.2-0.7,0.3-0.9,0.3c-0.3,0-0.5-0.2-0.7-0.5
	c-0.1-0.3-0.3-0.7-0.4-1.1c0.9-0.5,1.9-1.1,3.1-1.8c1.2-0.7,2.4-1.3,3.5-1.8c1.1-0.6,2.1-1,3-1.4c0.9-0.4,1.5-0.5,1.8-0.5
	c0.8,0,1.3,0.4,1.3,1.3c0,0.4,0,0.8-0.1,1.2L46.3,64z" />
        <g>
            <path fill="#AABA0A" d="M46.5,92.3c-25.3,0-45.8-20.6-45.8-45.8S21.2,0.7,46.5,0.7c25.3,0,45.8,20.6,45.8,45.8
		C92.3,71.8,71.8,92.3,46.5,92.3z M46.5,4.2c-23.3,0-42.3,19-42.3,42.3s19,42.3,42.3,42.3c23.3,0,42.3-19,42.3-42.3
		S69.8,4.2,46.5,4.2z" />
        </g>
    </symbol>

    <use xlink:href="#symbol1" />
</svg>

CSS

svg {
    width: 200px;
    height: 200px;
    cursor: not-allowed;
    outline: 1px dashed #aaa;
    pointer-events: all;
    padding: 50px;
    box-sizing: border-box;
}

JavaScript

console.clear();

function createTooltip($el) {
    $el = $($el);

    $el.tooltip({
        items: "[data-tooltip]",
        content: $el.data("tooltip"),
        track: true
    });
}

$("[data-tooltip]").each(function() {
    var self = this;

    // Grab the closest likely container to lazily instantiate the tooltip when hovered
    $(self).parent().parent().one("mouseenter", function() {
        createTooltip(self);
    });

    $(self).click(function(e) {
        console.log("asdf");
        setTimeout(function() {
            if ($(this).tooltip("instance")) {
                $(this).tooltip("open");
            }
        }.bind(this), 0);
    }).click();
});

$.fn.instantiatedTooltips = function() {
    return this
        .find("[data-tooltip]")
        .filter(function() {
            return $(this).tooltip("instance");
        });
};

$.instantiatedTooltips = function() {
    return $(document).instantiatedTooltips();
};

// Close all tooltips by clicking anywhere on the body.
$(document.body).on("click", function(e) {
    if ($(e.target).is("[data-tooltip]")) {
        $.instantiatedTooltips()
            .not(e.target)
            .each(function() {
                $(this).tooltip("close");
            });
    } else {
        $.instantiatedTooltips().tooltip("close");
    }
});