web-dev-qa-db-ja.com

bootstrapのツールチップは、ajaxの後で機能しません

Index.phpという名前のファイルがあり、file1.phpという名前の別のファイルが含まれています（index.phpには、jQuery、jsなどに必要なすべてのファイルが含まれています）。 file1.phpには、それぞれがモーダルを開くボタンのあるテーブルがあります。モーダルの情報は、file2.phpのajax呼び出しからのものです。 file2.phpにテーブルを作成します。表にはセルがあります：

<button class='btn btn-default tooltip-default' data-toggle='tooltip' data-trigger='hover' data-placement='top' data-content='content' data-original-title='Twitter Bootstrap Popover'>AAA</button>

そして、まあ、ツールチップは機能しません。しかし、これをコピーしてfile1.phpに取得すると、表の下にあり、ツールチップは機能します。

誰かがツールチップを修正するのを手伝ってもらえますか？どうも。

javascriptjqueryajaxtwitter-bootstraptooltip
14
Yuvalb

新しく到着したデータのツールチップを初期化する必要があると思います。

$('[data-toggle="tooltip"]').tooltip();

DOM操作の後、このコードをAJAX成功ハンドラーに配置します。

14
Tom

本体などの既存の要素でセレクターを使用する

$('body').tooltip({selector: '[data-toggle="tooltip"]'});
7
elyas.m

私はすべてを試しましたが、何もうまくいきませんでした。そこで、クリック*したときにツールチップを詳しく調べたところ、shown.bs.tooltipが起動されるたびに、aria-describebyプロパティが表示され、その値が毎回変化することがわかりました。

したがって、私のアプローチ（およびそれは機能します）は、この動的要素のコンテンツを変更することです。

私はこのコードを手に入れました：

$('body').on('shown.bs.tooltip', function(e) {

    var $element = $(e.target);
    var url = $element.data('url');

    if (undefined === url || url.length === 0) {
        return true;
    }

    var $describedByContent = $('#' + $element.attr('aria-describedby')).find('.tooltip-inner');

    if ($element.attr('title').length > 1) {
        $describedByContent.html($element.attr('title'));
        return true;
    }

    $.ajax({
        url: url,
        method: 'GET',
        beforeSend: function () {
            $element.attr('title', 'Cargando... espere por favor.');
            $describedByContent.html($element.attr('title'));
        }
    }).done(function (data) {
        $element.attr('title', JSON.stringify(data));
        $describedByContent.html($element.attr('title'));
    });

    return true;
});

私の場合、ツールチップには、タイトルのデータを取得するためのdata-url属性があります。元のタイトルは「-」であり、要素をクリック*するたびにajaxを呼び出す必要はありません。

私にとって、データがそれほど速く変化するとは思わないので、毎回ajaxを作成することは役に立ちません。

動的に作成された要素には、クラス.tooltip-innerの要素があるため、そのコンテンツを置き換える必要があります。

これがお役に立てば幸いです。

* click：デフォルトのホバーでシステムがおかしくなることがあり、show.bs.tooltipが永久に起動され、デフォルト値と新しい値が切り替わるため、クリックイベントを選択しました。

1
Mr.Stallone

これは、次の2つの方法のいずれかで実行できます。

  1. ajaxComplete関数を記述して、ajax呼び出しが完了するたびに、ツールチップを何度も再初期化することができます。これは、ほとんどのページにデータテーブルがあり、ajaxデータテーブルを呼び出すたびにツールチップを初期化する場合に便利です。
$(document).ajaxComplete(function() {
    $("[data-toggle="tooltip"]").tooltip();
});
  1. または、ajax成功コールバックの後にツールチップ関数を呼び出すことができます。
function tool_tip() {
    $('[data-toggle="tooltip"]').tooltip()
}

tool_tip();  // Call in document ready for elements already present

$.ajax({
    success : function(data) {
        tool_tip();  // Call function again for AJAX loaded content
    }
})
0
Salar Bahador

ツールチップの初期化をAjaxコールバック関数に入れる必要があります。

$.ajax({
    method: "POST",
    url: "some.php"
}).done(function( msg ) {
    $('[data-toggle="tooltip"]').tooltip();
});

-または-

すべてのAjaxコールバック関数に初期化コードを配置する代わりに、ajaxCompleteイベントを使用してグローバルに実装できます。

/* initializate the tooltips after ajax requests, if not already done */    
$( document ).ajaxComplete(function( event, request, settings ) {
    $('[data-toggle="tooltip"]').not( '[data-original-title]' ).tooltip();
});

このコードは、data-toggle = "tooltip"属性が定義されているが、属性 "data-original-title"がない（つまり、ツールチップが初期化されていない）すべてのノードのツールチップを初期化します。

0
Amr

次のように配置してツールチップを設定します。

function setUpToolTipHelpers() {
    $(".tip-top").tooltip({
        placement: 'top'
    });
    $(".tip-right").tooltip({
        placement: 'right'
    });
    $(".tip-bottom").tooltip({
        placement: 'bottom'
    });
    $(".tip-left").tooltip({
        placement: 'left'
    });
}

ドキュメントレディコールでこれを初期化します。

    $(document).ready(function () {
        setUpToolTipHelpers();
    });

このようにして、ツールチップの配置を決定でき、クラスとタイトルを使用してチップを割り当てるだけで済みます。

<td class = "tip-top", title = "Some description">name</td>

次に、成功したajax関数内で「setUpToolTipHelpers（）」を呼び出します。または、完全な関数で呼び出すこともできます。これは私にとってはうまくいくようです。

0
eaglei22

これは完璧に機能しました。

$('body').tooltip({selector: '[data-toggle="tooltip"]'});

0
Nagesh