12

新しいjQueryUIのツールチップウィジェットを変更して、ドキュメント上の特定の要素のクリックイベントでツールチップを開き、他の要素はマウスオーバーイベントでツールチップを表示する方法。クリックオープンの場合、ドキュメントの別の場所をクリックしてツールチップを閉じる必要があります。

これは可能ですか？

4

7 に答える 7

31

jqueryuiの使用：

HTML：

<div id="tt" >Test</div>

JS：

$('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "Displaying on click"});
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});

http://jsfiddle.net/adamovic/A44EB/で確認できます 。

コードの改善に協力してくれたPiradianに感謝します。

于 2013-04-21T16:09:57.440 に答える
12

このコードは、ツールチップの外側をクリックするまで開いたままになるツールチップを作成します。ツールチップを閉じた後でも機能します。これは、MladenAdamovicの答えの詳細です。

フィドル： http： //jsfiddle.net/c6wa4un8/57/

コード：

var id = "#tt";
var $elem = $(id);

$elem.on("mouseenter", function (e) {
    e.stopImmediatePropagation();
});

$elem.tooltip({ items: id, content: "Displaying on click"});

$elem.on("click", function (e) {
    $elem.tooltip("open");
});


$elem.on("mouseleave", function (e) {
    e.stopImmediatePropagation();
});


$(document).mouseup(function (e) {
    var container = $(".ui-tooltip");
    if (! container.is(e.target) && 
        container.has(e.target).length === 0)
    {
        $elem.tooltip("close");
    }
});
于 2015-01-13T16:31:21.743 に答える
7

この回答は、さまざまなクラスでの作業に基づいています。クラス'trigger'の要素でクリックイベントが発生すると、クラスは' trigger on'に変更され、jqueryuiに渡すためにmouseenterイベントがトリガーされます。

この例では、クリックイベントに基づいてすべてを作成するために、マウスアウトがキャンセルされています。

HTML

<p>
<input id="input_box1" />
<button id="trigger1" class="trigger" data-tooltip-id="1"  title="bla bla 1">
?</button>
</p>
<p>
<input id="input_box2" />
<button id="trigger2" class="trigger" data-tooltip-id="2"  title="bla bla 2">
?</button>
</p>

jQuery

$(document).ready(function(){ 
$(function () {
//show
$(document).on('click', '.trigger', function () {
    $(this).addClass("on");
    $(this).tooltip({
        items: '.trigger.on',
        position: {
            my: "left+15 center",
            at: "right center",
            collision: "flip"
        }
    });
    $(this).trigger('mouseenter');
});
//hide
$(document).on('click', '.trigger.on', function () {
    $(this).tooltip('close');
    $(this).removeClass("on")
});
//prevent mouseout and other related events from firing their handlers
$(".trigger").on('mouseout', function (e) {
    e.stopImmediatePropagation();
});
})
})

http://jsfiddle.net/AK7pv/111/

于 2013-12-23T21:14:25.080 に答える
5

私は今日この問題で遊んでいます、私は私の結果を共有すると思いました...

jQueryUIツールチップの例を使用して、カスタムスタイルとカスタムコンテンツ

私はこれら2つのハイブリッドが欲しかった。ツールチップではなくポップオーバーを使用できるようにしたかったので、コンテンツはカスタムHTMLである必要がありました。したがって、ホバー状態ではなく、クリック状態です。

私のJSは次のようなものです：

       $(function() {
        $( document ).tooltip({
            items: "input",
            content: function() {
                return $('.myPopover').html();
            },
            position: {
                my: "center bottom-20",
                at: "center top",
                using: function( position, feedback ) {
                    $( this ).css( position );
                    $( "<div>" )
                            .addClass( "arrow" )
                            .addClass( feedback.vertical )
                            .addClass( feedback.horizontal )
                            .appendTo( this );
                }
            }
        });

        $('.fireTip').click(function () {
            if(!$(this).hasClass('open')) {
                $('#age').trigger('mouseover');
                $(this).addClass('open');
            } else {
                $('#age').trigger('mouseout');
                $(this).removeClass('open');
            }

        })

    });

最初の部分は、多かれ少なかれUIサイトからのコード例の直接コピーであり、ツールチップブロックにアイテムとコンテンツが追加されています。

私のHTML：

   <p> 
       <input class='hidden' id="age"  /> 
       <a href=# class="fireTip">Click me ya bastard</a>
   </p>

  <div class="myPopover hidden">
       <h3>Hi Sten this is the div</h3>
  </div>

基本的に、アンカータグ（fireTipクラス）をクリックするとホバー状態をだまします。ツールチップを保持する入力タグでマウスオーバー状態が呼び出されるため、ツールチップが起動され、必要な限り維持されます...CSSがオンになっていますフィドル...

とにかく、ここに相互作用をもう少しよく見るためのフィドルがあります：http: //jsfiddle.net/AK7pv/

于 2013-08-26T10:30:38.863 に答える
4

このバージョンでは、ユーザーがツールチップ上でマウスを移動できるようにツールチップが表示されたままになり、マウスアウトするまで表示されたままになります。ユーザーがツールチップからテキストを選択できるようにするのに便利です。

$(document).on("click", ".tooltip", function() {
    $(this).tooltip(
        { 
            items: ".tooltip", 
            content: function(){
                return $(this).data('description');
            }, 
            close: function( event, ui ) {
                var me = this;
                ui.tooltip.hover(
                    function () {
                        $(this).stop(true).fadeTo(400, 1); 
                    },
                    function () {
                        $(this).fadeOut("400", function(){
                            $(this).remove();
                        });
                    }
                );
                ui.tooltip.on("remove", function(){
                    $(me).tooltip("destroy");
                });
          },
        }
    );
    $(this).tooltip("open");
});

HTML

<a href="#" class="tooltip" data-description="That&apos;s what this widget is">Test</a>

サンプル： http： //jsfiddle.net/A44EB/123/

于 2014-02-12T10:43:44.623 に答える
4

MladenAdamovicの回答を更新することには1つの欠点があります。一度だけ動作します。次に、ツールチップが無効になります。毎回それを機能させるには、クリック時にツールチップを有効にすることでコードを補足する必要があります。

 $('#tt').on({
  "click": function() {
    $(this).tooltip({ items: "#tt", content: "Displaying on click"});
    $(this).tooltip("enable"); // this line added
    $(this).tooltip("open");
  },
  "mouseout": function() {      
     $(this).tooltip("disable");   
  }
});
于 2016-01-06T15:14:39.187 に答える
-3

jsfiddle http://jsfiddle.net/bh4ctmuj/225/

これは役立つかもしれません。 

<!-- HTML --> 
      <a href="#" title="Link Detail in Tooltip">Click me to see Tooltip</a>      
 <!-- Jquery code--> 

    $('a').tooltip({          
     disabled: true,
     close: function( event, ui ) { $(this).tooltip('disable'); }
    });

  $('a').on('click', function () {
     $(this).tooltip('enable').tooltip('open');
   });
于 2013-02-07T14:31:33.350 に答える