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

每当数据库中收到新消息时，此代码运行s。

问题是这些表情符号工具提示不起作用。这些元素出现在 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);

MDL 使用 JS 添加工具提示

MDL Add tooltip with JS

javascript

html

css

material-design-lite