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>

.c-motives-wrapper

scss
.c-motives-wrapper {
  @include use-font('caption');
  align-items: center;
  background-color: use-color('grey', 'light-i');
  border: solid 1px use-color('grey');
  border-radius: 4px;
  color: use-color('grey');
  display: flex;
  margin: 8px auto;
  padding: 0 8px 0 4px;
  width: fit-content;

  .c-data-tooltip {
    line-height: 2;
  }

  [class^='icon-'],
  [class*=' icon-'] {
    @include use-font('body-alt');
    color: use-color('grey');
    display: flex;
    margin-right: 4px;
  }
}

Example

html
<div style="padding: 70px 12px 0;">

<div class="c-motives-wrapper">
  <span class="icon-close"></span>
  
  <span class="c-data-tooltip" 
    data-tooltip="/CONSULTA/Información general/Mesa de Ayuda (Recuperación de contraseña, activación WIFI, otros)."
    data-placement="top">
    ¿Por qué se cerró este chat?
  </span>
</div>

</div>