JSFiddle - React, Tailwind, and code Playground

by pythondave

HTML

<h3>Tips 1</h3>
<img src="http://demos111.mootools.net/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips1" title="Tips Title :: This is my tip content" />
 
<h3>Tips 2</h3>
<img src="http://demos111.mootools.net/demos/MousewheelCustom/moo.png" alt="mooCow" class="Tips2" title="Tips Title :: This is my tip content" />

<h3>Tips 3</h3>
Fixed tooltip: <a href="http://www.mootools.net" onclick="return false;" class="Tips3" title="Mootools official website">Mootools.net</a>
 
<h3>Tips 4</h3>
Custom className: <a href="http://www.mootools.net" onclick="return false;" class="Tips4" title="Mootools official website">Mootools.net</a>

CSS

.tool-tip {
    color: #fff;
    width: 139px;
    z-index: 13000;
}
 
.tool-title {
    font-weight: bold;
    font-size: 11px;
    margin: 0;
    color: #9FD4FF;
    padding: 8px 8px 4px;
    background: url(http://demos111.mootools.net/demos/Tips/bubble.png) top left;
}
 
.tool-text {
    font-size: 21px;
    padding: 4px 8px 8px;
    background: url(http://demos111.mootools.net/demos/Tips/bubble.png) bottom right;
}
 
.custom-tip {
    color: #000;
    width: 130px;
    z-index: 13000;
}
 
.custom-title {
    font-weight: bold;
    font-size: 11px;
    margin: 0;
    color: #3E4F14;
    padding: 8px 8px 4px;
    background: #C3DF7D;
    border-bottom: 1px solid #B5CF74;
}
 
.custom-text {
    font-size: 11px;
    padding: 4px 8px 8px;
    background: #CFDFA7;
}

JavaScript

/* Tips 1 */
var Tips1 = new Tips($$('.Tips1'));
 
/* Tips 2 */
var Tips2 = new Tips($$('.Tips2'), {
    initialize:function(){
        this.fx = new Fx.Style(this.toolTip, 'opacity', {duration: 500, wait: false}).set(0);
    },
    onShow: function(toolTip) {
        this.fx.start(1);
    },
    onHide: function(toolTip) {
        this.fx.start(0);
    }
});
 
/* Tips 3 */
var Tips3 = new Tips($$('.Tips3'), {
    showDelay: 400,
    hideDelay: 400,
    fixed: true
});
 
/* Tips 4 */
var Tips4 = new Tips($$('.Tips4'), {
    className: 'custom'
});