JSFiddle - React, Tailwind, and code Playground

by mackry

HTML

<script src="http://dl.dropbox.com/u/7951544/minitip.min.js"></script>
<div id="test" title="Organization" style="background: skyblue; display: inline-block; padding: 5px; margin: 100px;">blah</div>

CSS

/*! miniTip CSS - v1.5.0 */

#miniTip {
    /* main styles for tooltip */
    background-color: #fff;
    border: 4px solid #8bc437;
    color: #555;
    font-size: 13px;
    /* end editing style */
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    
    -moz-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
}

/* title bar style */
#miniTip_t {
    background-color: #f5edc2;
    font-weight: 700;
    padding: 4px 6px;
}

/* main content style */
#miniTip_c { padding: 4px 8px }


/* arrow holder, no need to edit */
#miniTip_a {
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    left: 0;
}

/* arrow pointing down, change border-top color to change color of the arrow */
#miniTip .n {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #8bc437;
    border-bottom: 0;
}

/* arrow pointing up, change border-bottom color to change color of the arrow */
#miniTip .s {
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #8bc437;
    border-top: 0;
}

/* arrow pointing left, change border-right color to change color of the arrow */
#miniTip .e {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    border-right: 8px solid #8bc437;
    border-left: 0;
}

/* arrow pointing right, change border-left color to change color of the arrow */
#miniTip .w {
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    border-left: 8px solid #8bc437;
    border-right: 0;
}

JavaScript

$(function(){
   $('#test').miniTip({
       anchor: 'e',
       aHide: false,
       delay: 100,
       fadeIn: 50,
       fadeOut: 50
    });
});