JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<ul class="bar">
            <li>
                <ul class="vertical"><li><img id="idMembresia" class="Tips1" src="http://somoslinux.hostoi.com/images/membreOff.png"/></li><li><img id="idSearch" class="Tips1" src="http://somoslinux.hostoi.com/images/userOff.png"/></li><li><img id="idDeposito" class="Tips1" src="http://somoslinux.hostoi.com/images/moneOff.png"/></li></ul>
            </li>
            <li><ul class="vertical"><li><img id="idChar" class="Tips1" src="http://somoslinux.hostoi.com/images/charOff.png"/></li><li><img id="idReload" class="Tips1" src="http://somoslinux.hostoi.com/images/reloadOff.png"/></li><li><img id="idChat" class="Tips1" src="http://somoslinux.hostoi.com/images/chatOff.png"/></li></ul></li>
        </ul>

CSS

.bar, .vertical{
                list-style: none;
            }
            .bar li{
                position:relative;
                margin:10px;
                height:110px;
            }
            .vertical li{
                float:left;
                margin:5px;
            }
            .vertical img{
                cursor:pointer;
            }
            .tip {
                color: #fff; 
                z-index: 13000; 
                background-color:#666; 
                -moz-border-radius: 3px; 
                -webkit-border-radius: 3px;
                font-size: 10px;
                font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
            }
            .tip-title {
                font-weight: bold;
                font-size: 11px;
                margin: 0;
                padding: 5px 5px 4px;
            }
            .tip-text {
               font-size: 11px;
               padding: 2px 8px 8px;
            }

JavaScript

var item = [
                {id: 'idMembresia', title:'Asignar', _message:'Asignar membresia', imgOn:'http://somoslinux.hostoi.com/images/membreOn.png', imgOff:'http://somoslinux.hostoi.com/images/membreOff.png'},
                {id: 'idSearch', title:'Buscar', _message:'Buscar cliente', imgOn:'http://somoslinux.hostoi.com/images/userOn.png', imgOff:'http://somoslinux.hostoi.com/images/userOff.png'},
                {id: 'idDeposito', title:'Deposito', _message:'Corte de caja', imgOn:'http://somoslinux.hostoi.com/images/moneOn.png', imgOff:'http://somoslinux.hostoi.com/images/moneOff.png'},
                {id: 'idReload', title:'Actualizar', _message:'Actualizar datos', imgOn:'http://somoslinux.hostoi.com/images/reloadOn.png', imgOff:'http://somoslinux.hostoi.com/images/reloadOff.png'},
                {id: 'idChar', title:'Graficas', _message:'Ver estadisticas', imgOn:'http://somoslinux.hostoi.com/images/charOn.png', imgOff:'http://somoslinux.hostoi.com/images/charOff.png'},
                {id: 'idChat', title:'Chat', _message:'Quieres chatear?', imgOn:'http://somoslinux.hostoi.com/images/chatOn.png', imgOff:'http://somoslinux.hostoi.com/images/chatOff.png'}
            ]
            
                var Tips1 = new Tips('.Tips1',{
                     showDelay: 400,
                     hideDelay: 400,
                    fixed:false
                 });
                 Tips1.addEvent('onShow', function(tip){
                     tip.fade('in');
                     
                 });
                 Tips1.addEvent('onHide', function(tip){
                     tip.fade('out');
                 });
                item.each(function(e, index){
                    $(e.id).store('tip:title', e.title);
                      $(e.id).store('tip:text', e._message); 
                    $(e.id).addEvents({
                        'click':function(){
                            alert(e.id);
                        },
                       ...