JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<p><strong>Vos magasins</strong></p>
<button type="button" class="c-tooltip">
  <svg aria-hidden="true" viewBox="0 0 21 18">
    <path d="M10.8 1.7C11.9.6 13.4 0 15 0s3.1.6 4.2 1.7 1.7 2.6 1.7 4.1-.6 3-1.7 4.1l-8.1 7.9c-.4.3-.9.3-1.3 0L1.7 9.9C-.6 7.6-.6 4 1.7 1.7s6.1-2.3 8.4 0l.3.3.4-.3zm-.3 14.2L17 9.6l1-.9c.8-.8 1.2-1.8 1.2-2.8S18.7 3.7 18 3c-.8-.8-1.8-1.2-2.9-1.2S13 2.2 12.2 3l-1 .9c-.4.3-.9.3-1.3 0l-1-.9C7.3 1.4 4.7 1.4 3.1 3s-1.6 4.1 0 5.7l7.4 7.2z" />
  </svg>
  <span class="c-tooltip__label">Ajouter Ă  vos magasin favoris</span>
</button>

<p><strong>Vos magasins</strong></p>
<div class="c-tooltip" tabindex="0">
  <svg aria-hidden="true" viewBox="0 0 22 20">
    <path d="M20.2 1.8C19.1.7 17.5 0 15.9 0c-1.6 0-3.2.6-4.3 1.6l-.2.2-.4.4-.4-.4C9.5.7 8 0 6.3 0 4.7 0 3.2.6 2 1.7l-.2.1c-2.4 2.5-2.4 6.5 0 8.9L11 20l9.2-9.3c2.4-2.5 2.4-6.5 0-8.9z" />
  </svg>
  <span class="c-tooltip__label">Ce magasin fait partie de vos favoris</span>
</div>

SCSS

@mixin hidevisually {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px  1px  1px  1px);
  clip: rect(1px, 1px, 1px, 1px);
  opacity: .001;
}

@mixin makevisible {
  position: static;
  height: auto;
  width: auto;
  clip: auto;
  overflow: visible;
  opacity: 1;
}

.c-tooltip {
  position: relative; 
  display: inline-block; 
  border: 0;
  padding: 0;
  background-color: transparent;
  font-size: inherit;
  font-family: inherit;
  
  & > svg {
    display: block;
    width: 2em;
    height: 2em;
  }

  &:hover .c-tooltip__label,  
  &:focus .c-tooltip__label {
    @include makevisible;
    position: absolute;
    top: auto;
    bottom: 100%;
    left: 0;
  }
}

  .c-tooltip__label {
    @include hidevisually;
    display: inline-block;
    background-color: red; 
    color: white; 
    white-space: nowrap;
  }