Hi all, I'm in need of some assistance. I have successfully created a wishlist toggle where clicking on the heart icon changes it from an outline to solid. However, my issue lies in changing the tooltip text from "add to wish list" to "added to wish list" only on the target element, instead of changing it on all elements in the array. How can I prevent this behavior and make the tooltip change only on the target element? Thank you for your help.
let i, j, toolTip;
let addItem;
for (i = 0; i < addToWish.length; i++) {
let addItem = addToWish[i];
function addToWishList() {
addItem.classList.add('fas');
addItem.classList.add('far');
favIconData++;
favDataOutput.textContent = favIconData;
navActionBadge.setAttribute('value', `${favIconData}`);
if (favIconData >= 1) {
favoriteIcon.classList.add('fas');
favoriteIcon.classList.remove('far');
} else {
favoriteIcon.classList.remove('fas')
favoriteIcon.classList.add('far')
}
}
function removeWishList() {
addItem.classList.remove('fas');
addItem.classList.add('far');
favIconData--;
favDataOutput.textContent = favIconData;
navActionBadge.setAttribute('value', `${favIconData}`);
if (favIconData >= 1) {
favoriteIcon.classList.add('fas');
favoriteIcon.classList.remove('far');
} else {
favoriteIcon.classList.remove('fas')
favoriteIcon.classList.add('far')
}
}
addItem.addEventListener('click', () => {
if (addItem.classList.contains('fas')) {
for (let j = 0; j < cardLabel.length; j++) {
let label = cardLabel[j];
label.textContent = 'Add to wishlist';
}
removeWishList()
} else {
for (let j = 0; j < cardLabel.length; j++) {
let label = cardLabel[j];
label.textContent = 'Added to wishlist';
}
addToWishList()
}
})
}<html>
<li class="card-action-item">
<button class="card-action-btn" aria-labelledby="card-label-2">
<i id="fav" class="far fa-heart">.</i>
</button>
<div class="card-action-tooltip" id="card-label-3">Add to Wishlist</div>
</li>
</html>