web-dev-qa-db-ja.com

クリック時にTwitter Bootstrap Tooltipコンテンツを変更

アンカー要素にツールチップがあり、クリック時にAJAXリクエストを送信します。この要素にはツールヒントがあります（Twitter Bootstrapから）。 AJAXリクエストが正常に返されたときにツールチップのコンテンツを変更したい。開始後にツールチップを操作するにはどうすればよいですか？

jquerytwitter-bootstraptooltip
210
rebellion

ソースコードを読んでいる間にこれを見つけました。したがって、$.tooltip(string)は、Tooltipクラス内の関数を呼び出します。そして、Tooltip.fixTitleを見ると、data-original-title属性を取得し、タイトル値をそれに置き換えます。

だから私たちは単純に：

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

確かに、ツールチップ内の値であるタイトルを更新します。

別の方法（以下の@lukmdoコメントを参照）：

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');
389
Mehmet Duran

Bootstrap 3では、"data-original-title"属性の変更が既にツールチップ表示の変更をトリガーするため、elt.attr('data-original-title', "Foo")を呼び出すだけで十分です。

PDATE： .tooltip（ 'show'）を追加して変更をすぐに表示できます。タイトルの変更を確認するためにマウスアウトやマウスオーバーを行う必要はありません

elt.attr('data-original-title', "Foo").tooltip('show');
86
Adriaan Tijsseling

実際にshow/hideを呼び出すことなく、ツールチップテキストを更新できます。

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')
13
BenG

ツールチップを閉じて再度開くことなくテキストを変更したい場合は、素晴らしい解決策があります。

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

この方法では、ツールチップを閉じることなくテキストが置き換えられます（再配置は行いませんが、Wordの1つの変更などを行う場合は問題ありません）。また、ツールチップをホバー+オフに戻すと、引き続き更新されます。

**これはbootstrap 3です。2の場合、おそらくデータ/クラス名を変更する必要があります

11
ndreckshage

これは、ツールチップがインスタンス化されている場合に機能します（おそらくJavaScriptを使用）：

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
8
Relational

bootstrap 3.xの場合

これは最もクリーンなソリューションのようです：

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Showは、ツールチップが非表示になって再び表示されるのを待たずに、タイトルをすぐに更新するために使用されます。

6
empa

次のコードを使用して、data-original-titleを変更するだけです。

$(element).attr('data-original-title', newValue);
6
Morteza QorbanAlizade

ブートストラップ4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
  border: 1px solid red;
  margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0ALU++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>
6
Chloe

Bootstrap 4の場合：

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
6
Bass

基本的には、既存のツールチップを廃棄し、新しいツールチップを表示することはありません。他の回答のようにツールチップでshowを呼び出すと、カーソルがその上にない場合でもポップアップします。

私がこのソリューションを選んだ理由は、既存のツールチップを再利用する他のソリューションでは、要素の上にカーソルを置いたときにツールチップが表示されないという奇妙な問題が発生したためです。

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}
4
aknuds1

bootstrap 4では、$(el).tooltip('dispose');を使用してから、通常どおり再作成します。したがって、ツールチップを作成する関数の前にdisposeを配置して、2倍にならないようにすることができます。

状態をチェックして値をいじくり回さなければならないのは、やさしくないようです。

2
Martin Lyne

関数を使用してツールチップ呼び出しでコンテンツを設定できます

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

呼び出された要素のタイトルのみを使用する必要はありません。

2
studio 42 france

このコードは私にとって非常に役に立ちましたので、私のプロジェクトで効果的であることがわかりました

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

2
Lucky

既存のツールチップを破棄して、新しいツールチップコンテンツを再入力できるようにします

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});
1
jerin

Mehmet Duranはほぼ正しいと思いますが、同じツールチップとその配置で複数のクラスを使用すると、いくつかの問題が発生しました。次のコードは、「tooltip_class」というクラスがあるかどうかをチェックするjsエラーも回避します。お役に立てれば。

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }
0
René Fernández

TooltipオブジェクトBoostrapの場合：

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
0
B.Asselin

これは私のために働いた：（ブートストラップ3.3.6; jquery = 1.11.3）

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

属性data-html="true"により、ツールチップタイトルでhtmlを使用できます。

0
omabra

BS4（および小さな変更を加えたBS3）の場合..数時間の検索と試行の後、私はこの問題に対して最も信頼性の高いソリューションを思いつき、同時に複数（ツールヒントまたはポップオーバー）を開く問題さえ解決しました。フォーカスを失った後に自動的に開く問題など。

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '     <li>Sherif Salah</li>';
  data += '     <li>Muhammad Salah</li>';
  data += '     <li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>
0
Sherif Salah

要素内のテキストを直接変更して、テキストを変更します。 （ツールチップの位置は更新しません）。

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

テキストを変更するには、古いツールチップを破棄してから、新しいツールチップを作成して表示します。 （古いものはフェードアウトし、新しいものはフェードインします）

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

Topメソッドを使用して、「保存」をアニメーション化します。メッセージ（ツールチップのサイズが変わらないように&nbspを使用）およびテキストを「完了」に変更します。 （プラスパディング）リクエストが完了すると。

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});
0
Nate

私は答えのどれも動作させることができませんでした、ここに回避策があります：

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
0
Alex