4

jquery：1.8.2
jquery ui：1.9.1

jquery uiツールチップを実装するデフォルトの方法を変更して、ホバーではなくクリックで機能するようにしました。

'a'タグは、ツールチップをアクティブにするためにクリックするものですが、ツールチップとして定義されていません。ツールチップとツールチップのコンテンツは「a」タグの後に配置され、cssで非表示になるため、コンテンツにカーソルを合わせたり表示したりすることはできません。 

<a class="tooltip-click" id="tt3">asdf</a><span class="tooltip-tick" title="">&nbsp;</span>
<div class="tooltip-content">3</div>

ツールチップの実装では、「title」を使用するのではなく、「content：」属性を使用して、ツールチップ定義の横にあるdivのコンテンツを取得します。

ツールチップ定義内に、ツールチップのコンテンツをクリックするとツールチップを閉じる関数もあります。 

$('.tooltip-tick').tooltip({
        position: { 
            my: "left+15 center", 
            at: "right center",
            using: function( position, feedback ) {
                        $( this ).css( position );
                        //function to close tooltip when content is touched                            
                        $('.ui-tooltip-content').click(function(){
                            $(".tooltip-tick").tooltip("close");
                        });   
        }},
        //the content of the div next to the tooltip instead of using title
        content: function(){
            return $(this).next().html();
        }   
    });

Aタグをクリックすると、最初に開いているツールチップがすべて閉じ、次に必要なツールチップが開きます。

$('.tooltip-click').click(function () {
        //first i close open tooltips
        if($(".ui-tooltip").length) $(".tooltip-tick").tooltip("close");
        //then open the tooltip next to the a tag                
        $($(this).next('.tooltip-tick')).tooltip('open');
    });

すべてが機能しますが、一度だけです。 http://jsfiddle.net/Js8g6/

4

2 に答える 2

8

ツールチップを閉じた後、「。tooltip-tick」のtitle-attributeを設定してみてください。

$(".tooltip-tick").attr("title", "");

ツールチップを開くにはタイトルが必要ですが、閉じるとどういうわけか削除されます。

これはほんの少しの回避策です;）

于 2012-12-13T14:00:22.043 に答える
0

これは私が見つけた最良の解決策です。タイトルのデフォルトのホバーを禁止するという追加の利点があります。

    $(".help").tooltip({ 

         position: { 

             my: "left-1 top+20", at: "right top" 

         },  

         open: function( event, ui ) {

            $('.ui-tooltip').hide();

            $('.help').click(function() {

                   $('.ui-tooltip').fadeIn();

           });
        }
    });
于 2013-03-27T20:05:38.557 に答える