Prototypes / Tooltip

An easy way to add customizable tooltips to any element, by simply adding the tooltip attribute on them. You can add a tooltip (or content with a tooltip) dynamically as well.

<button tooltip="Add item" id="add-item">
  <icon plus></icon>
</button>

<button tooltip="Remove item" id="remove-item">
  <icon minus></icon>
</button>

<script>
document.querySelector('#add-item').addEventListener('click', function() {
  const btn = document.createElement('button');
  btn.textContent = 'Button';
  btn.setAttribute('tooltip', 'Item ' + (this.parentElement.childElementCount - 2));
  this.parentElement.append(btn);
});

document.querySelector('#remove-item').addEventListener('click', function() {
  const lastBtn = this.parentElement.querySelector('button:last-child');
  if (lastBtn) {
    this.parentElement.removeChild(lastBtn);
  }
});
</script>