MDL使用JS添加工具提示

Question

  嘿，只是一个快速的说明，如果有人能提供一个很棒的小奖金，这个问题并没有引起太多关注。我愿意，但我没有太多的声誉，而50对我来说很重要。

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

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

所以我的问题是：

  

首先，这里有什么问题？如果问题是这个脚本在添加emojis的脚本之前运行，那么如何重新运行该脚本以便我的emojis将使用工具提示加载？

提前致谢，如果这是偏离主题或者其他事情，请不要立即向我们投票，当我因为我甚至不知道的事情而被投票时，它真的令人沮丧。

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);