在语义UI中动态生成工具提示值

我在我的项目中使用了sementic ui，并且想要动态生成要显示的工具提示的值。它甚至可以通过函数调用进行计算。目前，我有这个从官方文档：在语义UI中动态生成工具提示值

<div class="ui button" data-tooltip="Add users to your feed" data-position="top center"> 
    Top Center 
</div>

我已经搜索了像dynamic popup semantic ui和dynamic tooltip semantic ui方面却没有取得相关的结果。

以下是预期的功能。

<div class="ui button" data-tooltip="callmyfunction()" data-position="top center"> 
    Top Center 
</div>

来源

2017-10-09 anekix

您将需要为该元素分配一个mouseover事件。这将调用所需的功能

<div class="ui button" data-tooltip="" data-position="top center" onmouseover="callmyfunction(this)"> 
    Top Center 
</div>

要显示的功能，将处理值（未测试）

function callmyfunction(obj) { 
    var tt = obj.getAttribute('data-tooltip'); 
    obj.innerHTML = tt; 
}

来源

2017-10-09 09:45:40 jeff

thans的回答，但我得到这个错误obj.getAttribute不是一个函数。因为我使用的是vuejs，所以我加入了onmouse悬停，就像这样：'v-for ='t'v-on：mouseover =“addextraInfotoHeader（this）”data-tooltip =''，data-position ='bottom center '）{{t}}' – anekix

好的。打开浏览器中的开发工具栏（F12），单击Sources选项卡（名称取决于浏览器）。找到你的功能。设置一个断点。刷新页面，将鼠标悬停在div上。浏览器将停在断点处。看看obj变量和它的值。 – jeff

我做了这个（在Chrome中），然后在'scope'头下的'local'头下，我看到了这些变量'obj'和'this'。 'obj：Window'和其下的很多属性 – anekix

在语义UI中动态生成工具提示值

回答

相关问题