Всплывающая подсказка Bootstrap тега HTML не интерпретируется GWT Project

В настоящее время я работаю над проектом GWT и хочу использовать всплывающую подсказку Bootstraps в очень конкретном случае:

О чем это:
Часть программы позволяет пользователю войти в интерфейс. Этот интерфейс содержит текстовые поля, в которые он может вводить текст. После сохранения этого текста его можно будет просмотреть на другой странице программы.
Что важно: текст, который вводит пользователь, может быть как обычным текстом, так и HTML, который затем интерпретируется . Итак, если пользователь хочет отобразить список HTML вместо того, чтобы делать что-то вроде этого
- первый элемент
- второй элемент
- третий элемент
, он может просто ввести

<ul><li>first item</li><li>second item</li><li>third item</li></ul> 

вместо обычного текста.
Этот пример отлично работает и определения стилей.

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

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

"Наведите на меня" отображается в виде ссылки (синего цвета) и при наведении подчеркивается, как и ожидалось.
Но при наведении указателя мыши отображается только обычный заголовок "Ура! < / strong> "отображается не Bootstraps.

Я инициализировал всплывающую подсказку, как описано в https://www.w3schools.com/bootstrap/bootstrap_tooltip.asp с:

<script>
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip(); 
    });
</script> 

Этот сценарий находится в основном HTML-файле GWT.

Как это обрабатывается:
Внутри проекта GWT сначала получает чистую строку из текстового поля, а затем эта строка используется для создания HTML-виджета (на лету), который затем отображается в какое-то другое место, как уже упоминалось.

Примечание.
Я не могу изменить способ ввода информации, поскольку очень важно, чтобы у пользователя была свобода ввода информации, как описано выше.

Зачем мне это нужно:
Чтобы включить всплывающие подсказки также на сенсорных устройствах.

Возможно ли, что всплывающие подсказки инициализированы не в то время? Я имею в виду, что всплывающие подсказки инициализируются в самом начале при открытии программы. Но чтобы попасть в ту часть программы, где видны всплывающие подсказки, нужно щелкнуть через пару интерфейсов. Может, всплывающие подсказки надо инициализировать только в точное время при входе / загрузке соответствующей области?

Если у кого-то есть идея, это будет большим подспорьем.


person Johannes Krämer    schedule 14.05.2017    source источник


Ответы (1)


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

В документации начальной загрузки вы можете прочитать:

По соображениям производительности Tooltip и Popover data-apis являются дополнительными, что означает, что вы должны инициализировать их самостоятельно.

Показанный вами сценарий вызывается, когда документ готов. Он находит все элементы, для которых параметр data-toggle имеет значение tooltip (см. документацию). Затем для всех таких элементов вызывается функция инициализации всплывающей подсказки начальной загрузки. Если вы добавляете новую всплывающую подсказку, она не инициализируется автоматически.

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

private native void initTooltips() /*-{
    $wnd.jQuery("[data-toggle='tooltip']").tooltip();
}-*/;
person Adam    schedule 14.05.2017
comment
Спасибо за ответ. Я понимаю проблему. К сожалению, я пока не смог решить эту проблему: я попытался добавить ваш метод как статический в другой класс и из того же класса, в котором созданы соответствующие виджеты ... у меня это не работает. Я действительно новичок (пока что) с точки зрения jQuery, есть ли еще что-нибудь, что мне нужно принять во внимание? Я также пробовал использовать $ wnd. $ ('[Data-toggle = tooltip]'). Tooltip (); вместо этого тоже не работает. Я вызвал метод ПОСЛЕ создания HTML-виджета и передачи его содержимого ... - person Johannes Krämer; 15.05.2017
comment
Что ж, у меня работает ... Вы получаете сообщения об ошибках в консоли браузера? - person Adam; 15.05.2017
comment
Нет сообщений об ошибках :( Хорошо, я поиграю с этим, возможно, я инициализировал не в том месте ... - person Johannes Krämer; 20.05.2017
comment
Я нашел свою ошибку! Я действительно инициализировал всплывающую подсказку не в том месте! Это было слишком рано, сразу после того, как HTML-виджет был добавлен в панель, а не после того, как Panel была добавлена ​​в виджет DOM! Спасибо, что объяснили это! - person Johannes Krämer; 20.05.2017