Este componente funciona con data-attributes y puede ser usado junto a cualquier etiqueta div, span o anchor.

data attributes:

  • data-tippy-tooltip: texto del tooltip.
  • data-placement: ubicación del tooltip.

Examples

html top data-tooltip
<div style="display: flex; justify-content: space-between;padding: 70px 12px 0;">
  <a
    class="c-data-tooltip"
    data-tippy-tooltip="Información por día y por canal de los chats cerrados, tanto por el agente como por el bot."
    data-placement="top">
    Top Right
  </a>

  <span
    class="c-data-tooltip"
    data-tippy-tooltip="Información por día y por canal de los chats cerrados, tanto por el agente como por el bot."
    data-placement="top-left">
    Top Left
  </span>
</div>
html bottom data-tooltip
<div style="display: flex; justify-content: space-between;padding: 0 12px 70px;">
  <span
    class="c-data-tooltip"
    data-tippy-tooltip="Información por día y por canal de los chats cerrados, tanto por el agente como por el bot."
    data-placement="bottom">
    Bottom Right
  </span>

  <div
    class="c-data-tooltip"
    data-tippy-tooltip="Información por día y por canal de los chats cerrados, tanto por el agente como por el bot."
    data-placement="bottom-left">
    Bottom Left
  </div>
</div>