javascript - Dynamically Change tooltip text (tippy.js) - Stack Overflow

admin管理员组

文章数量:1405128

I am using tippy.js to generate tooltips in an asp mvc application. I am trying to change the text of the tooltip dynamically depending on another element, a drop down list. The problem I have is that the 'old' tooltips show on top of each other.

Here is my code (simplified):

$(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 autoplete: free text...
    {
        partyNameInput.className = "form-control partyName tip";         
        partyNameInput.title = "Please enter the visitor name.";
        tooltip('.tip', 'ehs');
    }
    else {
        partyNameInput.className = "form-control autoplete_party partyName tip";
        partyNameInput.title = "Type in the first letter of a surname, and pick the person from the list.";

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

});

The tooltip function:

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

I am using tippy.js to generate tooltips in an asp mvc application. I am trying to change the text of the tooltip dynamically depending on another element, a drop down list. The problem I have is that the 'old' tooltips show on top of each other.

Here is my code (simplified):

$(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 autoplete: free text...
    {
        partyNameInput.className = "form-control partyName tip";         
        partyNameInput.title = "Please enter the visitor name.";
        tooltip('.tip', 'ehs');
    }
    else {
        partyNameInput.className = "form-control autoplete_party partyName tip";
        partyNameInput.title = "Type in the first letter of a surname, and pick the person from the list.";

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

});

The tooltip function:

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

• javascript
• jquery
• tooltip

Share Improve this question Follow edited Dec 12, 2017 at 16:06 Syl20 asked Dec 12, 2017 at 15:49 Syl20Syl20 11733 silver badges1818 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You will need to set the dynamicTitle option to true.

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

Then you can change the title attribute of the element onClick or onHover

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

Source TippyJS docs: https://atomiks.github.io/tippyjs/

For Tippy v6 it's stated in the documentation on how you could 1) get the tippy property and 2) how to set the content.

For example, let's display 'Hide' when the the element has the class 'active', and display 'Show' when the it doesn't have the 'active' class:

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

本文标签： javascriptDynamically Change tooltip text (tippyjs)Stack Overflow