2009-09-21 67 views
1

有谁知道如何修改jQuery的工具提示: http://flowplayer.org/tools/tooltip.htmljQuery的工具提示的工具使用事件特殊悬停

使用事件特殊悬停: http://blog.threedubmedia.com/2008/08/eventspecialhover.html

jQuery的工具提示不依赖于悬停的方法,所以只需加载插件是不够的。

来源为事件悬停: http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js 下面是jQuery的工具提示来源: http://flowplayer.org/js/tools/tools.tooltip-1.1.1.js

我一直在试图得到这个工作了一段时间。提前致谢。

回答

0

@Jourkey,我从问题的理解是,只有当HOVER事件由jquery.event.hover plugin报告时才显示工具提示。如果是这种情况,那么大量的试验和错误后,我得到了它这样的:

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

太感谢你了,这是如此的帮助。 – Jourkey 2009-09-21 18:18:21

+0

@Jourkey很高兴我有任何帮助:) – TheVillageIdiot 2009-09-21 18:25:59