Tooltipster - instance.content() does not run separately for each instance of the class

I am trying to make tooltipster display different content with the same class.

I am using the .content( ... ) method, hoping it would change the value of the tooltip. The value of the .content( ... ) does change, but said value is the same for each tooltip with that class.

I would like tooltipster to to loop each time an instance of the class is found and update its content.

Fiddle example

---

What exactly do I mean:

I have a bunch json/arrays and they are grouped. For example:

/* animal "json/array" */
var animals = {
   "category": {
      "furry"  : "Are they furry: ",
      "legs"   : "How many legs do they have: ",
      "mammal" ; "Is it a mammal: "
   },{
   "animals": {
      "dog" : {
         "furry" : "Yes.",
         "legs"  : "Yes, 4.",
         "mammal": "Yes."
      },
      "cat" : {
         "furry" : "Extremely.",
         "legs"  : "Yes, 4.",
         "mammal": "Yes."
      }
   }
}

/* continents "json/array" */
var continents = {
   "category" : {
      "size" : "Size: ",
      "pop"  : "Population: ",
      "tz"   : "Timezones: "
   },{
   "continents" : {
      "africa" : {
         "size" : "...",
         "pop"  : "...",
         "tz"   : "..."
      },
      "asia" : {
         "size" : "...",
         "pop"  : "...",
         "tz"   : "..."
      }
   }
}

I am trying to use tooltipster in such a way:

   var animalsClass;
   function getMarkedAnimals(){
        animalsClass = document.getElementsByClassName("animals");
   }

function TooltipsterStuff(){
   $('.animal').tooltipster({
      functionReady: function(instance, helper) {
         for(let i = 0; i < animal.animals.length; i++){

            let fix;
            let pre0 = animal.animals.category.furry;
            let pre1 = animal.animals.category.legs;
            let pre2 = animal.animals.category.mammal;

            if(animal.animals.hasOwnProperty(animalsClass[i].textContent)){
               fix = animal.animals[i];
               instance.content(
                  pre0 + fix.furry +
                  pre1 + fix.legs +
                  pre2 + fix.mammal
               )
            }
         }
      }
   })     
}

function TooltipTriggerFunction (){
   getMarkedAnimals();
   TooltipsterStuff();
}

Lets say this is my HTML

<div>
   Some text about a <span class="animal">cat</span> and a <span class="animal">dog</span>. 
<div>

The problem is, that both cat and dog have the same tooltip. The last tooltip is always used.

I have tried moving instance.content(...) around, but it didn't help. I have tried to reset the value of var fix before it went into another iteration, but it didn't help.

If anyone has any idea how to fix this, I would be most grateful.

If I can provide any additional information or clarification, please let me know.

Thank you

Your problem is that on each step of loop, you are checking the animalsClass[i].textContent but you have to check those that mouse hover on it. I mean helper.origin.textContent.

So you need to do like this:

 function TooltipsterStuff() {
     $('.animals').tooltipster({
         contentAsHTML: true,
         functionReady: function (instance, helper) {
             debugger
             for (let i = 0; i < animalsClass.length; i++) {

                 let pre0 = animal.category.furry;
                 let pre1 = animal.category.legs;
                 let pre2 = animal.category.mammal;
                 let fix;
                 let enter = "</br>";

                 if (animal.animals.hasOwnProperty(helper.origin.textContent)) {

                     fix = animal.animals[helper.origin.textContent];
                     console.log(fix);
                     instance.content(
                         pre0 + fix.furry + enter +
                         pre1 + fix.legs + enter +
                         pre2 + fix.mammal
                     )
                 }
             }
         }
     })
 }

Here is working sample.