jQuery Herramientas de información sobre herramientas a utilizar el evento especial de la libración

Question

¿Alguien sabe cómo modificar las herramientas de jQuery sobre herramientas: http://flowplayer.org/tools/tooltip.html

para utilizar el evento especial de vuelo estacionario: http://blog.threedubmedia.com/2008/08/eventspecialhover.html

jQuery herramientas de información sobre herramientas no se basa en el método de vuelo estacionario, por lo que sólo cargar el complemento es insuficiente.

Fuente de vuelo estacionario evento: http://threedubmedia.googlecode.com/files/jquery.event. activable 1.0.js Aquí está la fuente de información sobre herramientas herramientas jQuery: http://flowplayer.org/js/tools/tools.tooltip- 1.1.1.js

He estado tratando de conseguir que esto funcione por un tiempo. Gracias de antemano.

Answer 1

@Jourkey , lo que entendí de pregunta es que desea mostrar la información sobre herramientas sólo cuando HOVER evento es reportado por jquery.event.hover plugin. Si este es el caso, entonces después de mucho ensayo y error lo tengo así:

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.event.hover-1.0.js"></script>
<script type="text/javascript" src="tools.tooltip-1.1.1.js"></script>
<style type="text/css">
  div.hovering{background-color:yellow;}
  div.normal{background-color:white;}
  #demotip { display:none; background:transparent url(tooltip/white.png); 
  font-size:12px; height:60px; width:160px; padding:25px; color:#0505ff;}
</style>

<div id="rect" style="height:200px;width:200px;border:2px blue groove;" 
    class="normal" title='This is testing tooltip'></div> 
<div id="demotip">&nbsp;</div>
<span id="btnShow" style="border:1px solid black;">click</span>
<span id="btnClose" style="border:1px solid black;">close</span>

JavaScript:

<script type="text/javascript">
var api; //TO TAKE CARE OF TOOLTIP OBJECT
var hovering=false; //TO TRACK IF HOVERING STARTED BY HOVER PLUGIN OR NOT
    $(document).ready(function(){
    $.tools.tooltip.conf.position=["center","right"];
    $.tools.tooltip.conf.api=true;
    $.tools.tooltip.conf.effect='fade';
    $.tools.tooltip.conf.onBeforeShow = function(a){
                    return hovering;};
        $.tools.tooltip.conf.onBeforeHide = function(a){
                    return !hoveRing;};

        var api = $("#rect[title]").tooltip("#demotip");//CREATE TOOLTIP

    $("#btnShow").click(function(){
            hovering=true;
            api.show();});

    $("#btnClose").click(function(){
            hovering=false;
            api.hide();});

    $.event.special.hover.delay = 500;//REPORT HOVER AFTER DELAY OF 500MS
    $("#rect").hover(function(){},//HOVER START (BEFORE HOVERING)
            function(){
                hovering=true;
                api.show();}, //HOVERING
            function(){
                hovering=false;
                api.hide();}//HOVER END
        );
    });     
</script>