JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<link rel="stylesheet" href="http://static.flowplayer.org/tools/css/standalone.css">
<input type='button' value='disable' onclick='disable()' />
<input type='button' value='enable' onclick='enable()' />
<!-- elements with tooltips -->
<div id="demo">
    <img src="http://static.flowplayer.org/tools/img/photos/1.jpg"
        title="A must have tool for designing better layouts and more intuitive user-interfaces."/>

    <img src="http://static.flowplayer.org/tools/img/photos/2.jpg"
        title="Tooltips can be positioned anywhere relative to the trigger element."/>

    <img src="http://static.flowplayer.org/tools/img/photos/3.jpg"
        title="Tooltips can contain any HTML such as links, images, forms, tables, etc."/>

    <img src="http://static.flowplayer.org/tools/img/photos/4.jpg" style="margin-right:0px"
        title="There are many built-in show/hide effects and you can also make your own."/>
</div>

CSS

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {     
    display:none;     
    background:transparent url(http://flowplayer.org/tools/img/tooltip/black_arrow.png);     
    font-size:12px;     
    height:70px;     
    width:160px;     
    padding:25px;     
    color:#fff;     
}

JavaScript

function enable() {
    $("#demo img[title]").tooltip();
}

function disable() {
    $("#demo img").data('tooltip', null);
    
    $("#demo img").each(function(i, e) {
        if ($(e).data('title')) {
            $(e).attr('title', $(e).data('title'));
        }
    });
    
    $(".tooltip").remove();
    
}

$(function() {
    //$("#demo img[title]").tooltip();
});