MDL Добавить всплывающую подсказку с JS - PullRequest
Новая
       16

MDL Добавить всплывающую подсказку с JS

0 голосов
/ 09 июня 2018

Эй, короткая заметка, этот вопрос не привлек к себе большого внимания, если кто-то может предложить небольшую награду, которая была бы великолепна.Я бы хотел, но у меня не так много репутации, а 50 для меня много.

Хорошо, я создаю веб-приложение для чата, и в нем есть смайлики.

Я использую MDL для этого, а для эмодзи я использую подсказки.Посмотрите на эту картину ожидаемого поведения:

Emoji with Joy

Так или иначе, чтобы поместить эти смайлики, вот код, который у меня есть 

messageElement.innerHTML = messageElement.innerHTML.replace(/:alien:/g, '<div  id=":alien:"><img class="emoji" src="https://greenbayrules.github.io/host/emojis/faceemoji/alien.png" /> </div><div class="mdl-tooltip" data-mdl-for=":alien:">:alien:</div>');

Этот код выполняется всякий раз, когда новое сообщение получено в базе данных.

Проблема в следующем:

Эти подсказки смайликов не работают.Элементы появляются в элементе inspect, но при наведении они не отображаются.С другой стороны, если я скопирую и вставлю тот же элемент HTML и вставлю его в код HTML, он будет работать нормально.

Это заставляет меня думать, что MDL выполняет какой-то сценарий, когдавеб-сайт загружен, который активирует все подсказки.

Итак, мой вопрос таков:

Прежде всего, в чем здесь проблема?Если проблема заключается в том, что этот скрипт выполняется до того, как мой скрипт добавляет эмодзи, то как мне перезапустить этот скрипт, чтобы мои эмоджи загружались с работающей подсказкой?

Спасибо зазаранее, и если это не по теме или что-то в этом роде, пожалуйста, немедленно не понижайте это, это действительно обескураживает, когда меня опускают за то, чего я даже не знаю.

1 Ответ

0 голосов
/ 11 июня 2018

Вы пробовали использовать componentHanlder.upgradeElement?Например: 

messageElement.innerHTML = messageElement.innerHTML.replace(/:alien:/g, '<div  id=":alien:"><img class="emoji" src="https://greenbayrules.github.io/host/emojis/faceemoji/alien.png" /> </div>');

var tooltip = document.createElement('div');
tooltip.className = 'mdl-tooltip';
tooltip.setAttribute('data-mdl-for', ':alien:');
tooltip.innerHTML = ':alien:'
componentHandler.upgradeElement(tooltip);
messageElement.appendChild(tooltip);
...