Всплывающая подсказка в бутстрапе не работает после ajax

У меня есть файл с именем index.php, который включает в себя другой файл с именем file1.php(в index.php я включаю все необходимые файлы для jQuery, js и т.д.). В file1.php у меня есть таблица с кнопками, каждая из которых открывает модальную. информация в модальном формате - это вызов ajax для file2.php. in 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, под таблицей, всплывающая подсказка работает.

Может ли кто-нибудь помочь мне исправить всплывающую подсказку? спасибо.

Ответ 1

Мне кажется, вам нужно инициализировать всплывающую подсказку для вновь полученных данных, например.

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

Поместите этот код в обработчик успеха AJAX после манипуляции с DOM.

Ответ 2

Использовать селектор для существующего элемента, такого как body

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

Ответ 3

Я перепробовал все, и у меня ничего не получалось. Поэтому я внимательно посмотрел на всплывающую подсказку при нажатии кнопки * и обнаружил, что каждый раз при запуске visible.bs.tooltip появляется свойство aria-описано by, и его значение меняется каждый раз.

Итак, мой подход (и это работает) заключается в изменении содержимого этого динамического элемента.

Я получил этот код:

$('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: Я выбрал событие click, потому что зависание по умолчанию иногда сводит систему с ума, и show.bs.tooltip запускался навсегда, переключая его между значением по умолчанию и новым значением.

Ответ 4

Я установил подсказку для инструмента с помощью размещения:

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>

Затем я вызываю "setUpToolTipHelpers()" внутри моей функции ajax успеха. Или вы можете называть его и для полной функции. Кажется, это хорошо работает для меня.

Ответ 5

Вам нужно будет поместить инициализацию всплывающей подсказки в функцию обратного вызова 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" (т.е. подсказка не инициализирована).

Ответ 6

Вы можете сделать это одним из следующих двух способов:

Вы можете написать функцию ajaxComplete чтобы каждый раз после завершения вызова ajax она снова и снова инициализировала всплывающую подсказку. Это полезно, когда на большинстве ваших страниц есть таблицы данных и вы хотите инициализировать всплывающую подсказку после каждого вызова с датой ajax:

$(document).ajaxComplete(function() {
    $("[data-toggle="tooltip"]").tooltip();
});

Или вы можете вызвать функцию всплывающей подсказки после успешного вызова 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
    }
})

Ответ 7

Это сработало отлично.

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