<div
  [id]="id"
  role="tooltip"
  class="max-w-72 w-max absolute z-50 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
>
  {{ text }}
  <div class="tooltip-arrow" data-popper-arrow></div>
</div>
