У меня есть несколько таких ссылок на странице
<a href="{{ route('user_profile') }}"
class="user-tooltip"
data-uid="{{ $user->id }}>
{{ $user->name }}
</a>
При наведении на ссылки я показываю всплывающую подсказку, содержащую аватар пользователя и немного информации.До сих пор я создавал разные всплывающие подсказки для каждого пользователя на странице по мере загрузки страницы, но количество отображаемых пользователей растет, и я хочу загружать информацию для всплывающей подсказки, только если и когда это необходимо.Для этого я выполняю AJAX-вызов на сервер и получаю код разметки html, который будет помещен во всплывающую подсказку, но он не будет отображаться.
Это код, связанный со ссылками
$('.user-tooltip').tooltipster({
interactive: true,
content: 'Loading...',
contentAsHTML: true,
multiple:true,
functionBefore: function(instance, helper) {
var $origin = $(helper.origin);
if ($origin.data('loaded') !== true) {
$.get('https://localtest.mys/user-tooltip',
{uid:$origin.data('uid')},
function(data) {
instance.content($(data));
$origin.data('loaded', true);
});
}
}
});
При наведении ссылки появляется подсказка, содержащая сообщение Loading...
, и через некоторое время подсказка становится пустой.Ответ от сервера правильный, я проверил, что это строка, содержащая правильные HTML-теги, но она не отображается внутри всплывающей подсказки.
Чего мне не хватает?
Tooltipster: http://iamceege.github.io/tooltipster/
Редактировать: пояснение, HTML-код, исходящий от сервера, помещается в подсказку (анализирует элемент, который я могу прочитать), но он не отображается.
Попыткас делегированием проблема та же:
$('body').on('mouseenter', '.user-tooltip:not(.tooltipstered)', function(){
$(this).tooltipster({
interactive: true,
content: 'Loading...',
contentAsHTML: true,
functionBefore: function(instance, helper) {
let $origin = $(helper.origin);
if ($origin.data('loaded') !== true) {
$.get('https://localtest.mys/user-tooltip', {uid:$origin.data('uid')}, function(data) {
instance.content($(data));
$origin.data('loaded', true);
});
}
}
}).tooltipster('open');
});