web-dev-qa-db-ja.com

jQueryツールのツールチップ-タイトルの変更

Jqueryプラグインのツールツールチップ（http://flowplayer.org/tools/tooltip/index.html）で問題が発生しました。要素のタイトルを変更する必要があります。

   reloadTooltip();
   $("#example").attr('title', obj.text);
   reloadTooltip();

   function reloadTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

HTMLパーツ：

   <span title="text" id="example"></span>

私の解決策で、私はようやく2つのタイトルを取得しました。スタイルなし（jsを無視）は新しいものです。ツールのツールチップのタイトルはまだ変更されていません。

ありがとうございました

jquerytooltiptitlejquery-tools
16
smo

私も同じことをやろうとしています。 Tooltipプラグインコードを調べたところ、ツールチップを更新する迅速かつ簡単な方法として発見されました。プラグインは、title属性を削除し、そのコンテンツをtooltipTextという要素プロパティに配置します。 jQuery 1.6以降では、次のように操作できます。

// get the current tooltip content
$('#someElement').prop('tooltipText')

// set the tooltip content
$('#someElement').prop('tooltipText', 'w00t');

プラグインは、バージョン1.3の55行目にtooltipTextプロパティ（大文字に注意）を設定します。この方法で行われた変更は、私が知る限り、瞬時に行われます。

要素を直接操作する場合、ツールチップのコンテンツは次の場所にあります。

var e = document.getElementById('#someElement');
alert(e.tooltipText);
e.tooltipText = 'w00t';
20
Marty Vance

とった ！ツールチップの最新バージョンによると（v2.3.1以降） https://github.com/Twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L272 を設定する必要があります属性（プロパティではない） 'data-original-title'これは、ツールチップが現在使用しているためです。

それはハックですが、私にとってはうまくいったので、あなたにとってはうまくいくと思います。

$('#example').attr('data-original-title','the new text you want'); //and that's it.
19
alexserver

あなたがまだこれに対する答えを探しているかどうかわかりませんが、私はちょうど同じことを分類するために良い時間を数時間費やして、APIで答えを見つけました（見つけたらいつでも簡単です！）ドキュメンテーション。

最初にツールチップを設定する要素が何であれ、そこからツールチップAPIを取得し、新しい値を設定します。つまり、IDが「myTip」の要素にツールチップを設定した場合

$('#myTip').data('tooltip').getTip().html("New string!") ;

出来上がり。

タイトルを削除する必要はありません（ツールチップが遅延初期化されているため、とにかく削除しないでください）。代わりに、cancelDefault構成を使用します。

http://flowplayer.org/tools/tooltip/index.html

8
Chris

他のすべてのオプションは、tooltipsterの最後のリリース（3.3.0）では機能しませんでした。このコマンドは機能することがわかりました。

$('#selectorElement').tooltipster('content', 'new title');
4
Roy Shmuli

これはどう？

   initTooltip();
   updateTooltip(obj.text);


   function initTooltip(){
       $("[title]").tooltip({ position: "bottom right", opacity: 1 });
   }

   function updateTooltip(text){
       $("[title]").attr('title', text);
       $("[title]").data('title',text);
       $("[title]").removeAttr("title");   
    }

それが最善のアプローチかどうかはわかりませんが、あなたにとってはうまくいくと思います。

Obj.textは正しいですか？ obj.textには何が入っていますか？

2
Rui Lima

ツールチップを再初期化する以外は何もうまくいきませんでした：

        //Save the current configuration.
        var conf = trigger.data('tooltip').getConf();
        trigger.removeData('tooltip').unbind();
        //Add the changed text.
        var newText = 'Hello World!';
        trigger.attr("title", newText);
        //Reapply the configuration.
        trigger.tooltip(conf);

GetTip（）に関する以前の回答では、ツールチップを少なくとも1回表示する必要があります。それ以外の場合、getTip（）はnullを生成します。

OnBeforeShowを使用することでほとんど問題なく動作しましたが、イベントをアンバインドして、表示するたびに実行されないようにする方法を理解できませんでした。

カスタムレイアウトを使用していたためか、タイトルを変更してもうまくいきませんでした。

1
John

タイトルを動的に変更する別の解決策は、onBeforeShowイベントを使用することです。

jQuery('#myselector').tooltip({onBeforeShow: tooltipBeforeShow});

...

function tooltipBeforeShow() {
  // On production you evaluate a condition to show the apropiate text
  var text = 'My new text for the <b>tooltip</b>';
  this.getTip().html(text);
}

thisは、イベント関数のツールチップオブジェクトを参照します

1
Ismaelj

私にとって最高のツールチップ！ Gmailのようなこのツールチップ

enter image description here

ヘッドサイト：

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script type='text/javascript' src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" type="text/css" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">

HTMLの場合：

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

<br/>

<a class="example" href="#" original-title="Hello World">Hover over me</a>

JavaScriptコード：

$(function() {
    $('.example').tipsy();
});

デモにアクセス jsfiddle

0
mghhgm

上記のすべては最新バージョンのツールチップスターでは機能しません。正しい方法は次のとおりです。

$('#help').data($('#help').data('tooltipsterNs')[0]).Content="new content";
0
Rabih Kodeih

JQueryのdata（ "title"）メソッドを呼び出して、タイトル値を変更してみてください。

0
Marco Schmid

これを使用してください：$（selector）.attr（ "data-original-title"、 "your tooltip text！"）;

0
Avinash

私もこれで苦労しました。そして、このコードは私のために働きました：

$('.yourelement').attr('tooltipText', newToolTip);

大文字Tに注意してください。小文字Tは機能しません。

0
live-love

これは私のために働きました：

$（ '＃yourID'）。attr（ 'data-original-title'、 'New Message'）。tooltip（ 'show'）。tooltip（ 'hide'）;

0
FD gi