JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>  
<html> 
<head> 
</head> 
<body> 
 
 
 
<!-- use gif image for IE --> 
<!--[if lt IE 7]>
<style>
.tooltip {
    background-image:url(http://flowplayer.org/tools/img/tooltip/black_arrow.gif);
}
</style>
<![endif]--> 
 
<!-- a couple of trigger elements --> 
    
    <br><br><br><br><br>
    
<div id="demo"> <a href="#">
    <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."/> </a>
 
    <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> 
 
    Please note: first box won't work with firefox because it's inside a <a> tag! 
 

</body> 
 
</html>

CSS

body {
    padding:50px 80px;
    font-family:"Lucida Grande","bitstream vera sans","trebuchet ms",sans-serif,verdana;
}

/* get rid of those system borders being generated for A tags */
a:active {
  outline:none;
}

:focus {
  -moz-outline-style:none;
}

/* 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

/**
 * @license 
 * jQuery Tools 1.2.5 Tooltip - UI essentials
 * 
 * NO COPYRIGHTS OR LICENSES. DO WHAT YOU LIKE.
 * 
 * http://flowplayer.org/tools/tooltip/
 *
 * Since: November 2008
 * Date:    Wed Sep 22 06:02:10 2010 +0000 
 */
(function($) {     
    // static constructs
    $.tools = $.tools || {version: '1.2.5'};
    
    $.tools.tooltip = {
        
        conf: { 
            
            // default effect variables
            effect: 'toggle',            
            fadeOutSpeed: "fast",
            predelay: 0,
            delay: 30,
            opacity: 1,            
            tip: 0,
            
            // 'top', 'bottom', 'right', 'left', 'center'
            position: ['top', 'center'], 
            offset: [0, 0],
            relative: false,
            cancelDefault: true,
            
            // type to event mapping 
            events: {
                def:             "mouseenter,mouseleave",
                input:         "focus,blur",
                widget:        "focus mouseenter,blur mouseleave",
                tooltip:        "mouseenter,mouseleave"
            },
            
            // 1.2
            layout: '<div/>',
            tipClass: 'tooltip'
        },
        
        addEffect: function(name, loadFn, hideFn) {
            effects[name] = [loadFn, hideFn];    
        } 
    };
    
    
    var effects = { 
        toggle: [ 
            function(done) { 
                var conf = this.getConf(), tip = this.getTip(), o = conf.opacity;
                if (o < 1) { tip.css({opacity: o}); }
                tip.show();
                done.call();
            },
            
            function(done) { 
                this.getTip().hide();
                done.call();
            } 
        ],
        
        fade: [
            function(done) { 
                var conf = this.getConf();
                this.getTip().fadeTo(conf.fadeInSpeed, conf.opacity, done); 
            },  
           ...