Tippy js, изменить контент если другой класс?

248

17 ноября 2021, 06:30

Привет использую плагин Tippy js

tippy('.product-item__compare', {
    content: 'Добавить в сравнение'
  });

Можно ли модифицировать что если у .product-item__compare есть класс active изменить контент

Answer 1

Взял с оф документации. Как менять контент у каждого элемента. Создаёте singleton и передаёте на вход массив. Получаете все item через classList проверяете наличие того или иного класса и изменяете контент!

import tippy, {createSingleton} from 'tippy.js'; 
 
const instances = []; 
const items = document.querySelectorAll('.product-item__compare'); 
 
for (let i = 0; i < items.length; i++) { 
  const contentItem = items[i].classList.contains('active') ? 'Добавить в сравнение' : 'Другой контент' 
  instances.push( 
    tippy(items[i], { 
      content: contentItem, 
      updateDuration: 400, 
    }), 
  ); 
} 
 
createSingleton(instances, {delay: [300, 600]});