5

jQueryUI を使用してツール ヒントのテキストとして使用する title 属性を持つ div ボタンがあります。ボタンをクリックして、ボタンのツールチップを変更したいと思います。ただし、ボタンがクリックされてコールバック関数が起動されると、マウスは div の上にあり、タイトルは null です。

この動作を修正するにはどうすればよいですか? jQueryUI Tooltip ウィジェットは、ホバー時にタイトルを削除し、マウスアウトに戻すようです。

$( document ).tooltip();
$(".btn").click(function(){
    alert($(this).attr("title")); // Expect to see T1 or T2 but shows blank
    if ($(this).attr("title")=="T1"){
        $(this).attr("title","T2")
    }else{
        $(this).attr("title","T1")
    }
});

ライブ: http://jsfiddle.net/lordloh/ckTjA/

jQueryUI Tooltip ウィジェットが配置されていなくても、問題なく動作するようです: http://jsfiddle.net/lordloh/ckTjA/1/

さらに、ツールチップ ウィジェットを に適用しました$(document)。ツールチップが明示的に$(this).tooltip("option","content")適用されていないため、使用できません。$(this)これにより、コンソールで Javascript エラーが発生します。

2013-02-18: 現在、$(document).tooltip("destroy");タイトル属性を変更して を実行しています$(document).tooltip();。エレガントな解決策ではありません:-(ハックではないものを探しています。

4

3 に答える 3

4

ウィジェットはtitle属性からテキストを削除して、ネイティブ ブラウザーのツールチップが表示されないようにします。テキストを削除すると、要素に添付されたデータに保存されます。

次のコード行を使用して同じことを行うことができます。

$("#my-element").data("ui-tooltip-title", "My new tooltip message");

ここで、ユーザーがマウスを要素から離し、再び上に移動すると、新しいテキストが表示されます。

新しいテキストをすぐに表示するには、ライブ ツールチップ オーバーレイ要素を更新する必要があります。ありがたいことに、これは簡単に見つけることができます。テキストを更新した後、これを行う必要があります。

$(".ui-tooltip-content").html($("#my-element").data("ui-tooltip-title"));

jQuery UI 1.10.0 でテスト済み。

于 2013-02-28T16:15:47.377 に答える
2

ツールチップ ウィジェットを使用する場合、独自の API を介してコンテンツを更新できます。

    $(this).tooltip('option', 'content', "New Content Goes Here");
于 2013-02-17T22:37:49.743 に答える
0

これを試して：





  
$('document').ready(function() { $( 'document').tooltip();
  $(".btn").クリック(関数(){
      alert($(this).attr("タイトル"));
      if ($(this).attr("title")=="T1"){
          $(this).attr("タイトル","T2");
      }そうしないと{
          $(this).attr("タイトル","T1");
      }
    });
  });
$( 'document' ) は一重引用符または二重引用符 (' または ") で囲む必要があり、 $( 'document' ) .tooltip ();がなくても問題なく動作します。

于 2013-10-30T09:46:41.767 に答える