1

jqueryツールのツールチップを変更する方法を知っている人はいますか: http://flowplayer.org/tools/tooltip.html

イベント スペシャル ホバーを使用するには: http://blog.threedubmedia.com/2008/08/eventspecialhover.html

jQuery ツールのツールチップは hover メソッドに依存しないため、プラグインをロードするだけでは不十分です。

イベント ホバーのソース: http://threedubmedia.googlecode.com/files/jquery.event.hover-1.0.js jquery ツール ツールチップのソース: http://flowplayer.org/js/tools/tools.tooltip- 1.1.1.js

私はこれをしばらくの間機能させようとしてきました。前もって感謝します。

4

1 に答える 1

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>
于 2009-09-21T11:54:09.353 に答える