19

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

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

そのコンテンツをリアルタイムで変更するにはどうすればよいですか?

4

6 に答える 6

22

次のように、初期化後に jQuery ツールチップの内容を変更できます。

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

ここにデモがあります。

詳細については、APIを参照してください。

于 2014-01-19T17:38:36.570 に答える
2

最初の回答が間違っていました、申し訳ありません。

<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');
}
于 2013-04-04T03:14:55.617 に答える
1

これは私にとってうまくいく別の解決策です-これをに追加するだけです$(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ツールチップをトリガーする要素をカスタマイズできることに注意してください。

于 2013-12-03T18:26:24.417 に答える
0

私の使用例では、ツールチップ要素がクリックされたときに (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);
});
于 2016-05-27T15:31:25.343 に答える