...


Tooltips transparentes de Mootools

etiquetas | comentarios Sin

Tips 1


Asterix

CODIGOS:

  1. .- Scripts:

    <script language='javascript' src='http://junioscripts.googlepages.com/mootools.svn.js' type='text/javascript'/>

    <script type='text/javascript'>

    window.addEvent(&#39;domready&#39;, function(){

    /* Tips 1 */

    var Tips1 = new Tips($$(&#39;.Tips1&#39;));



    /* Tips 2 */

    var Tips2 = new Tips($$(&#39;.Tips2&#39;), {

    initialize:function(){

    this.fx = new Fx.Style(this.toolTip, &#39;opacity&#39;, {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($$(&#39;.Tips3&#39;), {

    showDelay: 400,

    hideDelay: 400,

    fixed: true

    });



    /* Tips 4 */

    var Tips4 = new Tips($$(&#39;.Tips4&#39;), {

    className: &#39;custom&#39;

    });

    });

    </script>

  2. .- 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: orchid;

    border-left:5px solid #fff;

    }



    .tool-text {

    font-size: 11px;

    padding: 4px 8px 8px;

    background:firebrick;

    border-left:5px solid #fff;

    }



    .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;

    }




  3. .- HTML:

    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi24QIhqfsCu5qsgT1-8g6UkKlsnHS51XpNw3Uew3Kgzbc95FyLXAODNzjXLR9XHspiOpfGBAcfP_qya5X5DFk7NEDG3NriyeYQmPZQ-Y6znYV3RoIhxBDofiO4tkVL7KmyZYac3D9g1fc/s400/asterix0.gif" alt="Asterix" class="Tips1" title="Tips Title :: Prueba Tooltip de Mootools" />


Web autor: Mootools

|Sin comentarios

Me aburro...

Slideshow (reformado)

    Ultimas entradas