web-dev-qa-db-ja.com

Jquery UIツールチップのコンテンツをリアルタイムで更新するにはどうすればよいですか？

カーソルを合わせると、アイテムの価格（ゲーム内）を表示する要素があります。 jQuery UIツールチップを使用して、各アイテムに関する情報を表示しています。アイテムがクリックされると、jQueryはクリックをキャプチャし、$。get（）リクエストを使用して購入を処理し、JSONおよびjQueryのparseJSON機能を介してアイテムに関連する特定の情報を返すことができます。

ただし、各アイテムの価格は購入ごとに異なります。それは一種のインフレです。 jQuery UIツールチップのコンテンツにアクセスしてコンテンツを変更する方法がわからないので、コンテンツが表示されている間、または表示されていない場合でも、コンテンツの値を変更して新しい価格を反映します。

そのコンテンツをリアルタイムで変更するには何をする必要がありますか？

jquery-ui-tooltip
19
Nicholas Cardot

初期化後、jQuery Tooltipの内容を次のように変更できます。

$( ".selector" ).tooltip( "option", "content", "Awesome title!" );

これが demo です。

詳細は [〜＃〜] api [〜＃〜] を参照してください。

20
Foreever

私はちょうどこれに遭遇しましたが、ここでの他の答えは、OPが尋ねた問題（私が抱えていたのと同じ問題）を実際にはカバーしていません：jQueryUIツールチップを取得して、「title」属性を変更するときにコンテンツを変更する方法ツールチップのあるアイテム。 「title」属性のない入力があり、それはAJAX=を介してサーバーに対して検証されていました。有効でない場合は、CSSクラスを変更し、「title」を追加してエラー、およびjQuery UIのツールチップを「正しく動作する」と期待しています。

JQUIドキュメントに従ってツールチップをセットアップし、$(document).tooltip()を使用してデフォルトの委任された動作（「title」属性を持つすべての有効なアイテムのツールチップを表示する）を取得しました。次に、私のajax検証で$("#inputid").attr("title", "validation error");を使用すると、すべてが美しく、エラーメッセージが入力にカーソルを合わせるとツールチップとして表示されました。

ただし、ユーザーが$("#inputid").removeAttr("title");を呼び出して入力値を修正した後で「title」属性を削除すると、「tip」属性がツールチップとともに不可解に再表示されるため、問題が発生することがわかりました。

少し掘り下げた後、ツールチップウィジェットが "title"属性を別の場所に（.data("ui-tooltip-content"...)を使用して）保存してブラウザの実際のツールチップを無効にし、それを復元したことが原因であることがわかりました（これが "タイトル」属性が不思議なことに再現されました。

したがって、OPの質問に対する「正しい」（またはおそらく最も簡単な）答えは、「title」属性を変更（または削除）する前にjQueryUIのツールチップ機能を一時的に無効にし、その後再度有効にして、コンテンツと正しいことを行います。だからこのようなもの：

_// first, disable tooltips
$(document).tooltip("disable");

// Make your change to the element's title
$("#inputid").attr("title", "new message");
    or ...
$("#inputid").removeAttr("title");

// re-enable tooltips
$(document).tooltip("enable");
_

これですべてです！上記のように.tooltip("option", "content", "some text")を使用する場合の問題は、表示するツールチップをすべて手動で定義する必要があることです。必要なのは、ツールチップを「そのまま動作させる」だけの場合は、不必要に多くのコーディングを行うことです。ページのコンテンツ。

5
Steve Sauder

私の最初の答えは間違っていました。

<div id='mybody'>
  <p title='Some tooltip'>paragraph</p>
</div>

javascript：

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text});
}

ツールチップを呼び出して、内容を変更できます。これはツールチップを変更しますが、ホバーするまでは変更されません。

編集：

私はうまくいく何かを見つけたと思います。ツールチップを閉じて再度開くだけです。ツールチップに新しいテキストが含まれます。

function reloadToolTip(text){
  $('#mybody p').tooltip({contents:text}).tooltip('close').tooltip('open');
}
2
James

このようにしてみませんか？

HTML：

 <input class="input-change" id="input1" type="text" title="Test1" value="Input #1">
 <input class="input-change" id="input2" type="text" title="Test2" value="Input #2">
 <input class="input-change" id="input3" type="text" title="Test3" value="Input #3">

jQuery：

// Every time a key is pressed (for the sake of example)
$(function(){
    // Initialize tooltip
    $('.input-change').tooltip();

    // Every time a key is pressed (again, for the sake of example)
    $(".input-change").keyup(function(){
        // Get the actual value of the input that has changed (again, for the sake of example)
        var inputValue = $(this).val();

        // Get the id of the input that has changed
        var idInputChanged = "#" + $(this).attr('aria-describedby');

        // Go directly to the <div> inside the tooltip and change the text
        $(idInputChanged + ' div').html('Text changed in real time without closing tooltip!:<br />' + inputValue);
    });
})

JSFiddleの例：

http://jsfiddle.net/4MT5R/

1
Tomatrox

これは私にとってうまくいく別の解決策です-これを$(function(){ // code here });に追加するだけです：

_$(document).tooltip({
    content: function()
    {
        var $this = $(this);
        return $this.attr('title');
    }
});
_

これの利点は、実行時にtitle属性が変更された場合、ツールチップに常に最新バージョンが表示されるため、ツールチップ自体が「更新」されることです。

技術的には、これがattr('title')で機能するかどうかはテストしていません（私はそうなると思います）。

私の個人用バージョンは、ツールチップに表示されるテキスト（HTMLコードなど）を表示する必要があるという点で異なります。だからここに私が私の現在のプロジェクトに使用しているコードがあります：

_<div class="title" data-note="This is my tooltip text<br>with line break"></div>
_

そして

_$(document).tooltip({
    items: ".title",
    content: function()
    {
        var $this = $(this);
        if ($this.data('note') != '')
        {
            return unescape($this.data('note'));
        }
        else
        {
            return false;
        }
    }
});
_

itemsを使用すると、要素をカスタマイズしてツールチップをトリガーできます。

1
semmelbroesel

私の使用例では、ツールチップ要素がクリックされたときに（URLをクリップボードにコピーするために）成功/失敗メッセージを設定し、要素がホバーを失ったときにリセットして、要素が次にホバーされたときに元のメッセージが表示されるようにしました。

ダブルクリック、つまりツールチップがまだ開いているときにクリックすると、要素が失われ、ホバーを取り戻すと、新しいメッセージが持続することに気付きました。これは私がそれを解決した方法です。改善のための提案があれば歓迎します。

var msg = 'New message';

// Cache $target
var $target = $(event.target);

// First close tooltip, which should be open on hover
$target.tooltip('close');

// Get the original message
var oldMsg = $target.tooltip("option", "content");

// Set the tool tip to the success/fail message
$target.tooltip("option", "content", msg);

// Open the tooltip with the new message
$target.tooltip('open');

// For some reason, the tooltip doesn't close automatically
// unless the hide option is reset
$target.tooltip("option", "hide", {effect: "fade", duration: 1000});

// Set message back to original after close.
$target.on("tooltipclose", function (event, ui) {
    $(this).tooltip("option", "content", oldMsg);
});
0
lancemonotone