2009-09-21 31 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