动态更改工具提示文本 (tippy.js)

Question

我正在使用tippy.js 在asp.net mvc 应用程序中生成工具提示。 我正在尝试根据另一个元素（下拉列表）动态更改工具提示的文本。 我遇到的问题是“旧”工具提示显示在彼此之上。

这是我的代码（简化）：

$(document).on('change', '.partyStatus', function (event) {
        event.preventDefault();
        event.stopImmediatePropagation(); //stops propagation of click event to other element having the same ID

    if (this.value == 5) //Visitor => no autocomplete: free text...
    {
        partyNameInput.className = "form-control partyName tip";         
        partyNameInput.title = "Please enter the visitor name.";
        tooltip('.tip', 'ehs');
    }
    else {
        partyNameInput.className = "form-control autocomplete_party partyName tip";
        partyNameInput.title = "Type in the first letter of a surname, and pick the person from the list.";

        tooltip('.tip', 'ehs');
    }

});

工具提示功能：

function tooltip(selector, userTheme) {
    tippy(selector, {
        theme: userTheme,
        position: 'right',
        animation: 'scale',
        duration: 600
    })
}

Answer 1

您需要将 dynamicTitle 选项设置为 true。

tippy(selector, {
  theme: userTheme,
  position: 'right',
  animation: scale,
  dynamicTitle: true
})

然后就可以更改元素的标题属性 onClick 或 onHover

element.addEventListener('click', function() {
  this.setAttribute('title', 'New tooltip title here!');
})

源 TippyJS 文档： https ://atomiks.github.io/tippyjs/

Answer 2

对于 Tippy v6，文档中说明了如何 1) 获取 tippy 属性和 2)如何设置内容。

例如，让我们在元素具有“活动”类时显示“隐藏”，当元素没有“活动”类时显示“显示”：

$(document).on('click', '.filter', function (){
    if( $(this).hasClass('active') ){
        this._tippy.setContent('Hide')
    }else{
        this._tippy.setContent('Show');
    }
})