.c-data-tooltip

scss
.c-data-tooltip {
  cursor: pointer;
  position: relative;
  text-decoration: none;

  &::after {
    @include use-font('caption');
    background-color: use-color('base', 'white');
    border-radius: 4px;
    box-shadow: $box-shadow-card-lvl-1;
    content: attr(#{data-tooltip});
    display: none;
    max-width: 288px;
    opacity: 0;
    outline: none;
    padding: 12px 8px;
    position: absolute;
    visibility: hidden;
    width: 288px;
    z-index: use-layer('modal');
  }

  &:hover::after,
  &:focus::after {
    display: block;
    opacity: 1;
    visibility: visible;
    z-index: 2;
  }

  &[#{data-placement}='bottom']::after,
  &[#{data-placement}='bottom-right']::after {
    left: -8px;
    margin-top: 4px;
    top: 100%;
  }

  &[#{data-placement}='bottom-left']::after {
    margin-top: 4px;
    right: -8px;
    top: 100%;
  }
    
  &[#{data-placement}='top']::after,
  &[#{data-placement}='top-right']::after {
    bottom: 100%;
    left: -8px;
    margin-bottom: 4px;
  }

  &[#{data-placement}='top-left']::after {
    bottom: 100%;
    margin-bottom: 4px;
    right: -8px;
  }
}

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

data attributes:

  • data-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-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-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-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-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>