在語義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中動態生成工具提示值

回答

相關問題