javascript - MDL 使用 JS 添加工具提示

Question

我正在制作一个聊天网络应用程序，其中有表情符号。

我正在使用 MDL 来制作这个，对于表情符号，我正在使用工具提示。请参阅这张预期行为的图片:

所以无论如何，把这些表情符号放在这里是我的代码

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 在加载网站时执行某种脚本，激活所有工具提示。

首先，这里的问题是什么？如果问题是此脚本在添加表情符号的脚本运行之前运行，那么我该如何重新运行该脚本，以便我的表情符号加载时工具提示正常工作？

Answer 1

您是否尝试过使用 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);