JQuery Tools Tooltip zur Verwendung von Event Special Hover

Question

Weiß jemand, wie man JQuery Tools Tooltip modifiziert:http://flowplayer.org/tools/tooltip.html

Ereignisspezifische Schwebeplätze verwenden:http://blog.threedubmedia.com/2008/08/eventspecialhover.html

JQuery Tools Tooltip beruht nicht auf die Schwebemethode, daher ist das Laden des Plugins nicht ausreichend.

Quelle für Ereignisschwebe:http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.jsHier ist die Quelle für JQuery Tools Tooltip:http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js

Ich habe versucht, dies eine Weile zum Laufen zu bringen. Danke im Voraus.

Answer 1

@Jourkey, Was ich aus der Frage verstanden habe, ist, dass Sie den Tooltip nur dann zeigen möchten, wenn HOVER Ereignis wird von gemeldet von jquery.event.hover plugin. Wenn dies der Fall ist, habe ich nach viel Versuch und Irrtum es so bekommen:

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