jQuery Tools tooltip to use event special hover

Question

Does anyone know how to modify jquery tools tooltip: http://flowplayer.org/tools/tooltip.html

to use event special hover: http://blog.threedubmedia.com/2008/08/eventspecialhover.html

jQuery tools tooltip doesn't rely on hover method, so just loading the plugin is insufficient.

Source for event hover: http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js Here's the source for jquery tools tooltip: http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js

I've been trying to get this to work for a while. Thanks in advance.

Answer 1

@Jourkey, What I understood from question is that you want to show the tooltip only when HOVER event is reported by jquery.event.hover plugin. If this is the case then after lot of trial and error I got it like this:

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