Have got problem with mapping content via tooltipster

Question

I've got a problem with implementing Tooltipster on my site. I have mapped image with buildings and wanted to show with tooltipster which of the building is sold or not. Every building has its own number like Building 1, Building 2 etc in alt (I've tried with data-name, too). The problem is when I'm looping over the NodeList of the elements, always get last item. E.g I have Building 2, Building 4 and Building 7 which are "sold", I'm looping over the every building from the NodeList. I'm checking with if statement if specific area has class inside named "sold", if it has, I give him content: "sold" + $(buildingList[i]).attr('data-name') to make Tooltip like "Sold Building 4".

I've tried functions from Tooltipster or making my own and returning building with number to loop, I also tried with naming, alt. I have no idea what to do.

var buildingStatus = document.querySelectorAll("area");
for(var i = 0; i<buildingStatus.length; i++){
    if(buildingStatus[i].classList.contains('free') === true){
        $(buildingStatus[i]).data('maphilight',{
            fill: true,
            fillColor: '00ff00',
            fillOpacity: 0.6,
            stroke: true,
            strokeColor: '00ff00',
        }); 
        $('.free').tooltipster({
            theme: 'tooltipster-punk',
            multiple: true, 
            contentAsHTML: true,
            content: "free" + $(buildingStatus[i]).alt(),
        });   
    }
    else if (buildingStatus[i].classList.contains('sold') === true){
        $(buildingStatus[i]).data('maphilight',{
            fill: true,
            fillColor: 'ff0000',
            fillOpacity: 0.6,
            stroke: true,
            strokeColor: 'ff0000',
        }); 
        $('.sold').tooltipster({
            theme: 'tooltipster-punk',
            multiple: true,
            onlyOne: true,
            contentAsHTML: true,
            content: "sold"+
            $(buildingStatus[i]).attr('data-name'),
        }); 
    }
}

Wanted to get tooltip for every building with its number. It always gets last number from the list e.g every building with class "sold" gets "Sold Building 7".

Answer 1

You don't need that conditional statement and you don't need the loop.

$('.sold').tooltipster({...});

will select all elements that have class="sold", so you don't have to check for the class name by doing some conditional looping.

Just add some function to your selector which reads the needed values from your HTML before your tooltip is created, then pass those values to your tooltip.

For example you could add

var name = $(this).attr('data-name');

and then pass the variable to your tooltip for displaying it inside the tooltip when it's activated.

Edit: More example code

Some quick and dirty example (using jQueryUI native tooltip):

Four divs, two different classes (free and sold), each class used as jQuery selector. Tooltip is created for every <p> element inside the divs. Data attribute of each div is assigned to variable, which is then inserted into tooltip text. As you can see it's not using any loops or conditions.

HTML:

<div data-stuff="Some data for sold building" class="sold">
    <p>Some sold building</p>
</div>
<div data-stuff="More data for another sold building" class="sold">
    <p>Another sold building</p>
</div>
<div data-stuff="Some data for a free building" class="free">
    <p>Some free building</p>
</div>
<div data-stuff="More data for another free building" class="free">
    <p>Another free building</p>
</div>

jQuery:

$(function(){
    $(".free").tooltip({
        track: true,
        items: "p",
        content: function(){
            var text = $(this).parent().attr("data-stuff");
            return "<div class='tooltipfree'>"+text+"</div>";
        },
    });
});
$(function(){
    $(".sold").tooltip({
        track: true,
        items: "p",
        content: function(){
            var text = $(this).parent().attr("data-stuff");
            return "<div class='tooltipsold'>"+text+"</div>";
        },
    });
});

A little CSS for this example:

.sold {
  background: #ff9999;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid black;
  margin: 10px;
 }
.free {
  background: #99ff99;
  font-size: 18px;
  font-weight: bold;
  border: 1px solid black;
  margin: 10px;
 }
.tooltipfree {
  background: #99ff99;
  border: 1px solid black;
  width: 70px;
}
.tooltipsold {
  background: #ff9999;
  border: 1px solid black;
  width: 70px;
}

Edit: Tooltipster code

I just took a look at the Tooltipster documentation for the first time, then tried some even simpler approach and it worked (on local server, not on codepen.io):

$(function(){
    $(".free").tooltipster({
        functionBefore: function (instance, helper) {
            var text = $(helper.origin).closest(".free").attr("data-stuff");
            instance.content(text);
            },
    });
});
$(function(){
    $(".sold").tooltipster({
        functionBefore: function (instance, helper) {
            var text = $(helper.origin).closest(".sold").attr("data-stuff");
            instance.content(text);
            },
    });
});