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

Hey, just a quick note, this question hasn’t recieved much attention if anyone can offer a small bounty that would be great. I would, but I don’t have much reputation, and like 50 is a lot for me.

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

我正在使用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>');

只要在数据库中收到新消息,就会运行此代码.

问题是这样的：

These emojis tooltips don’t work. The elements appear in the inspect element, but they don’t show up on hover. On the other hand, if I copy paste that same HTML element and put it in the HTML of the code, it works fine.

这使我认为MDL在加载网站时会执行某种脚本,从而激活所有工具提示.

所以我的问题是：

First of all, what is the problem here? If the problem is that this script is running before my script that adds the emojis does, then how do I re-run that script so my emojis will load with the tool-tip working?

在此先感谢,如果这是偏离主题或者某些事情,请不要立即对此进行投票,当我因为某些我甚至不知道的事情而被投票时,这真的令人沮丧.

解决方法:

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

标签：html,javascript,css,material-design-lite
来源： https://codeday.me/bug/20190910/1799516.html