@ussebastian/kitdigital/src/js/components/ComponentTooltip.js

Kit Digital de la Universidad San Sebastián

import tippy from 'tippy.js';

export default class ComponentTooltip {
  constructor(el) {
    this.rootNode = el;

    const getAttr = (attribute) => this.rootNode.getAttribute(attribute);

    this.target = getAttr('data-uss-content-target');
    this.placement = getAttr('data-uss-placement');

    const delayString = getAttr('data-uss-delay');
    this.delay = delayString ? delayString.split(',').map((item) => Number(item)) : [0, 0];
    const durationString = getAttr('data-uss-duration');
    this.duration = durationString ? durationString.split(',').map((item) => Number(item)) : [0, 0];

    this.inlineContent = getAttr('data-uss-content');

    this.targetContent = this.target
      ? document.querySelector(`[data-uss-tooltip-content-id="${this.target}"]`).innerHTML
      : null;

    this.tooltipContent = this.inlineContent || this.targetContent;
  }

  init() {
    if (!this.tooltipContent) return;

    const contentWrapper = document.createElement('div');
    contentWrapper.classList.add('uss-tooltip__content');
    contentWrapper.innerHTML = this.tooltipContent;

    tippy(this.rootNode, {
      content: contentWrapper,
      allowHTML: true,
      arrow: false,
      delay: this.delay,
      duration: this.duration,
      placement: this.placement || 'top',
      trigger: 'mouseenter click',
    });
  }
}