Tooltip

Tooltip padrão

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      Informação
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      Informação
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      Informação
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  position: absolute;
  min-width: 100px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  text-align: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  width: fit-content;
  visibility: hidden;
  opacity: 0;
}

.tooltip .tooltip__item::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  border-width: 0 8px 8px 8px;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
  color: #5C5C5C;
}

.tooltip[data-color=light] .tooltip__item::after {
  border-color: transparent transparent #fff transparent;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
  color: #F5F5F5;
}

.tooltip[data-color=dark] .tooltip__item::after {
  border-color: transparent transparent #000 transparent;
}


/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=top] .tooltip__item::after {
  bottom: -7px;
  left: 50%;
  transform: rotate(180deg) translate3d(50%, 0, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=bottom] .tooltip__item::after {
  top: -5px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=left] .tooltip__item::after {
  top: 0;
  bottom: 0;
  margin: auto;
  right: -10px;
  transform: rotate(90deg);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=right] .tooltip__item::after {
  top: 0;
  bottom: 0;
  left: -10px;
  margin: auto;
  transform: rotate(-90deg);
}

Tooltip padrão sem seta

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      Informação
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      Informação
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      Informação
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  position: absolute;
  width: fit-content;
  max-width: 185px;
  word-wrap: break-word;
  height: auto;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  text-align: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  visibility: hidden;
  opacity: 0;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
  color: #5C5C5C;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
  color: #F5F5F5;
}

/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

Tooltip com ícone

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.66667 4V2C4.66667 1.82319 4.7369 1.65362 4.86193 1.52859C4.98695 1.40357 5.15652 1.33333 5.33333 1.33333H13.3333C13.5101 1.33333 13.6797 1.40357 13.8047 1.52859C13.9298 1.65362 14 1.82319 14 2V11.3333C14 11.5101 13.9298 11.6797 13.8047 11.8047C13.6797 11.9298 13.5101 12 13.3333 12H11.3333V14C11.3333 14.368 11.0333 14.6667 10.662 14.6667H2.67133C2.58342 14.6672 2.49626 14.6503 2.41488 14.6171C2.3335 14.5838 2.25949 14.5348 2.19711 14.4729C2.13472 14.4109 2.0852 14.3372 2.05137 14.2561C2.01754 14.1749 2.00009 14.0879 2 14L2.002 4.66667C2.002 4.29867 2.302 4 2.67333 4H4.66667ZM3.33533 5.33333L3.33333 13.3333H10V5.33333H3.33533ZM6 4H11.3333V10.6667H12.6667V2.66667H6V4Z" fill="#68CE8F"/>
      </svg>
      Copiado
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.66667 4V2C4.66667 1.82319 4.7369 1.65362 4.86193 1.52859C4.98695 1.40357 5.15652 1.33333 5.33333 1.33333H13.3333C13.5101 1.33333 13.6797 1.40357 13.8047 1.52859C13.9298 1.65362 14 1.82319 14 2V11.3333C14 11.5101 13.9298 11.6797 13.8047 11.8047C13.6797 11.9298 13.5101 12 13.3333 12H11.3333V14C11.3333 14.368 11.0333 14.6667 10.662 14.6667H2.67133C2.58342 14.6672 2.49626 14.6503 2.41488 14.6171C2.3335 14.5838 2.25949 14.5348 2.19711 14.4729C2.13472 14.4109 2.0852 14.3372 2.05137 14.2561C2.01754 14.1749 2.00009 14.0879 2 14L2.002 4.66667C2.002 4.29867 2.302 4 2.67333 4H4.66667ZM3.33533 5.33333L3.33333 13.3333H10V5.33333H3.33533ZM6 4H11.3333V10.6667H12.6667V2.66667H6V4Z" fill="#68CE8F"/>
      </svg>
      Copiado
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.66667 4V2C4.66667 1.82319 4.7369 1.65362 4.86193 1.52859C4.98695 1.40357 5.15652 1.33333 5.33333 1.33333H13.3333C13.5101 1.33333 13.6797 1.40357 13.8047 1.52859C13.9298 1.65362 14 1.82319 14 2V11.3333C14 11.5101 13.9298 11.6797 13.8047 11.8047C13.6797 11.9298 13.5101 12 13.3333 12H11.3333V14C11.3333 14.368 11.0333 14.6667 10.662 14.6667H2.67133C2.58342 14.6672 2.49626 14.6503 2.41488 14.6171C2.3335 14.5838 2.25949 14.5348 2.19711 14.4729C2.13472 14.4109 2.0852 14.3372 2.05137 14.2561C2.01754 14.1749 2.00009 14.0879 2 14L2.002 4.66667C2.002 4.29867 2.302 4 2.67333 4H4.66667ZM3.33533 5.33333L3.33333 13.3333H10V5.33333H3.33533ZM6 4H11.3333V10.6667H12.6667V2.66667H6V4Z" fill="#68CE8F"/>
      </svg>
      Copiado
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  position: absolute;
  min-width: 100px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  text-align: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  width: fit-content;
  visibility: hidden;
  opacity: 0;
}

.tooltip .tooltip__item::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  border-width: 0 8px 8px 8px;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
  color: #5C5C5C;
}

.tooltip[data-color=light] .tooltip__item::after {
  border-color: transparent transparent #fff transparent;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
  color: #F5F5F5;
}

.tooltip[data-color=dark] .tooltip__item::after {
  border-color: transparent transparent #000 transparent;
}


/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=top] .tooltip__item::after {
  bottom: -7px;
  left: 50%;
  transform: rotate(180deg) translate3d(50%, 0, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=bottom] .tooltip__item::after {
  top: -5px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=left] .tooltip__item::after {
  top: 0;
  bottom: 0;
  margin: auto;
  right: -10px;
  transform: rotate(90deg);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=right] .tooltip__item::after {
  top: 0;
  bottom: 0;
  left: -10px;
  margin: auto;
  transform: rotate(-90deg);
}

Tooltip com ícone sem seta

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.66667 4V2C4.66667 1.82319 4.7369 1.65362 4.86193 1.52859C4.98695 1.40357 5.15652 1.33333 5.33333 1.33333H13.3333C13.5101 1.33333 13.6797 1.40357 13.8047 1.52859C13.9298 1.65362 14 1.82319 14 2V11.3333C14 11.5101 13.9298 11.6797 13.8047 11.8047C13.6797 11.9298 13.5101 12 13.3333 12H11.3333V14C11.3333 14.368 11.0333 14.6667 10.662 14.6667H2.67133C2.58342 14.6672 2.49626 14.6503 2.41488 14.6171C2.3335 14.5838 2.25949 14.5348 2.19711 14.4729C2.13472 14.4109 2.0852 14.3372 2.05137 14.2561C2.01754 14.1749 2.00009 14.0879 2 14L2.002 4.66667C2.002 4.29867 2.302 4 2.67333 4H4.66667ZM3.33533 5.33333L3.33333 13.3333H10V5.33333H3.33533ZM6 4H11.3333V10.6667H12.6667V2.66667H6V4Z" fill="#68CE8F"/>
      </svg>
      Copiado
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.66667 4V2C4.66667 1.82319 4.7369 1.65362 4.86193 1.52859C4.98695 1.40357 5.15652 1.33333 5.33333 1.33333H13.3333C13.5101 1.33333 13.6797 1.40357 13.8047 1.52859C13.9298 1.65362 14 1.82319 14 2V11.3333C14 11.5101 13.9298 11.6797 13.8047 11.8047C13.6797 11.9298 13.5101 12 13.3333 12H11.3333V14C11.3333 14.368 11.0333 14.6667 10.662 14.6667H2.67133C2.58342 14.6672 2.49626 14.6503 2.41488 14.6171C2.3335 14.5838 2.25949 14.5348 2.19711 14.4729C2.13472 14.4109 2.0852 14.3372 2.05137 14.2561C2.01754 14.1749 2.00009 14.0879 2 14L2.002 4.66667C2.002 4.29867 2.302 4 2.67333 4H4.66667ZM3.33533 5.33333L3.33333 13.3333H10V5.33333H3.33533ZM6 4H11.3333V10.6667H12.6667V2.66667H6V4Z" fill="#68CE8F"/>
      </svg>
      Copiado
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M4.66667 4V2C4.66667 1.82319 4.7369 1.65362 4.86193 1.52859C4.98695 1.40357 5.15652 1.33333 5.33333 1.33333H13.3333C13.5101 1.33333 13.6797 1.40357 13.8047 1.52859C13.9298 1.65362 14 1.82319 14 2V11.3333C14 11.5101 13.9298 11.6797 13.8047 11.8047C13.6797 11.9298 13.5101 12 13.3333 12H11.3333V14C11.3333 14.368 11.0333 14.6667 10.662 14.6667H2.67133C2.58342 14.6672 2.49626 14.6503 2.41488 14.6171C2.3335 14.5838 2.25949 14.5348 2.19711 14.4729C2.13472 14.4109 2.0852 14.3372 2.05137 14.2561C2.01754 14.1749 2.00009 14.0879 2 14L2.002 4.66667C2.002 4.29867 2.302 4 2.67333 4H4.66667ZM3.33533 5.33333L3.33333 13.3333H10V5.33333H3.33533ZM6 4H11.3333V10.6667H12.6667V2.66667H6V4Z" fill="#68CE8F"/>
      </svg>
      Copiado
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  position: absolute;
  min-width: 100px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  text-align: start;
  font-size: 14px;
  font-weight: 400;
  line-height: 19.6px;
  width: fit-content;
  visibility: hidden;
  opacity: 0;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
  color: #5C5C5C;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
  color: #F5F5F5;
}

/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

Tooltip com subtítulo

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  display: flex;
  flex-direction: column;
  position: absolute;
  min-width: 180px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  visibility: hidden;
  opacity: 0;
}

.tooltip .tooltip__item::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  border-width: 0 8px 8px 8px;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--title {
  color: #434343;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--subtitle {
  color: #A7A7A7;
}

.tooltip[data-color=light] .tooltip__item::after {
  border-color: transparent transparent #fff transparent;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--title{
  color: #F5F5F5;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--subtitle {
  color: #8E8E8E;
}

.tooltip[data-color=dark] .tooltip__item::after {
  border-color: transparent transparent #000 transparent;
}

.tooltip__item--title{
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: left;
}

.tooltip__item--subtitle{
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
}


/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=top] .tooltip__item::after {
  bottom: -7px;
  left: 50%;
  transform: rotate(180deg) translate3d(50%, 0, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=bottom] .tooltip__item::after {
  top: -5px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=left] .tooltip__item::after {
  top: 0;
  bottom: 0;
  margin: auto;
  right: -10px;
  transform: rotate(90deg);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=right] .tooltip__item::after {
  top: 0;
  bottom: 0;
  left: -10px;
  margin: auto;
  transform: rotate(-90deg);
}

Tooltip com subtítulo sem seta

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  display: flex;
  flex-direction: column;
  position: absolute;
  min-width: 180px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  visibility: hidden;
  opacity: 0;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--title {
  color: #434343;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--subtitle {
  color: #A7A7A7;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--title{
  color: #F5F5F5;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--subtitle {
  color: #8E8E8E;
}

.tooltip__item--title{
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-align: left;
}

.tooltip__item--subtitle{
    font-size: 12px;
    font-weight: 400;
    line-height: 16.8px;
    text-align: left;
}


/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

Tooltip com subtítulo e botão

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
      <a href="#" class="tooltip__item--link">Saiba mais</a>
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
      <a href="#" class="tooltip__item--link">Saiba mais</a>
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
      <a href="#" class="tooltip__item--link">Saiba mais</a>
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  display: flex;
  flex-direction: column;
  position: absolute;
  min-width: 180px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  visibility: hidden;
  opacity: 0;
}

.tooltip .tooltip__item::after {
  content: "";
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  border-width: 0 8px 8px 8px;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--title {
  color: #434343;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--subtitle {
  color: #A7A7A7;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--link {
  color: #01141E;
}

.tooltip[data-color=light] .tooltip__item::after {
  border-color: transparent transparent #fff transparent;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--title {
  color: #F5F5F5;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--subtitle {
  color: #8E8E8E;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--link {
  color: #FFFFFF;
}

.tooltip[data-color=dark] .tooltip__item::after {
  border-color: transparent transparent #000 transparent;
}

.tooltip__item--title {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
}

.tooltip__item--subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: left;
  margin-bottom: 16px;
}

.tooltip__item--link{
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
}

/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=top] .tooltip__item::after {
  bottom: -7px;
  left: 50%;
  transform: rotate(180deg) translate3d(50%, 0, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip[data-direction=bottom] .tooltip__item::after {
  top: -5px;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=left] .tooltip__item::after {
  top: 0;
  bottom: 0;
  margin: auto;
  right: -10px;
  transform: rotate(90deg);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

.tooltip[data-direction=right] .tooltip__item::after {
  top: 0;
  bottom: 0;
  left: -10px;
  margin: auto;
  transform: rotate(-90deg);
}

Tooltip com subtítulo e botão sem seta

Preview

HTML

<button class="tooltip" data-direction="top" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
      <a href="#" class="tooltip__item--link">Saiba mais</a>
   </span>
</button>


<!-- Para usar o tooltip com fundo escuro, mude a propriedade data-color para 'dark': 
<button class="tooltip" data-direction="top" data-color="dark">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
      <a href="#" class="tooltip__item--link">Saiba mais</a>
   </span>
</button>
-->

<!-- Para alterar a direção da abertura do tooltip, use os atributos 'top', 'right', 'bottom' e 'left' na propriedade data-direction: 
<button class="tooltip" data-direction="bottom" data-color="light">
   <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22C6.477 22 2 17.523 2 12C2 6.477 6.477 2 12 2C17.523 2 22 6.477 22 12C22 17.523 17.523 22 12 22ZM12 20C14.1217 20 16.1566 19.1571 17.6569 17.6569C19.1571 16.1566 20 14.1217 20 12C20 9.87827 19.1571 7.84344 17.6569 6.34315C16.1566 4.84285 14.1217 4 12 4C9.87827 4 7.84344 4.84285 6.34315 6.34315C4.84285 7.84344 4 9.87827 4 12C4 14.1217 4.84285 16.1566 6.34315 17.6569C7.84344 19.1571 9.87827 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" fill="white"/>
   </svg>
   <span class="tooltip__item">
      <span class="tooltip__item--title">Como Funciona</span>
      <span class="tooltip__item--subtitle">Lorem ipsum sit amet consectetur amet</span>
      <a href="#" class="tooltip__item--link">Saiba mais</a>
   </span>
</button>
-->

CSS

.tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 12px;
  border-radius: 4px;
  background-color: #01141e;
  border: none;
  transition: all linear 150ms;
  cursor: pointer;
}

.tooltip .tooltip__item {
  display: flex;
  flex-direction: column;
  position: absolute;
  min-width: 180px;
  padding: 8px 16px;
  transition: all 0.25s linear;
  border-radius: 4px;
  box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.12);
  z-index: 4;
  visibility: hidden;
  opacity: 0;
}

.tooltip:hover .tooltip__item {
  transform: translate3d(0, 100%, 0);
  visibility: visible;
  opacity: 1;
}

.tooltip[data-color=light] .tooltip__item {
  background-color: #fff;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--title {
  color: #434343;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--subtitle {
  color: #A7A7A7;
}

.tooltip[data-color=light] .tooltip__item .tooltip__item--link {
  color: #01141E;
}

.tooltip[data-color=dark] .tooltip__item {
  background-color: #000;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--title {
  color: #F5F5F5;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--subtitle {
  color: #8E8E8E;
}

.tooltip[data-color=dark] .tooltip__item .tooltip__item--link {
  color: #FFFFFF;
}

.tooltip__item--title {
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
}

.tooltip__item--subtitle {
  font-size: 12px;
  font-weight: 400;
  line-height: 16.8px;
  text-align: left;
  margin-bottom: 16px;
}

.tooltip__item--link{
  font-size: 14px;
  font-weight: 500;
  line-height: 19.6px;
  text-align: left;
}

/* apenas para tooltip ao topo */
.tooltip[data-direction=top] .tooltip__item {
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à base */
.tooltip[data-direction=bottom] .tooltip__item {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

/* apenas para tooltip à esquerda */
.tooltip[data-direction=left] .tooltip__item {
  top: 50%;
  right: 100%;
  transform: translate(0, -50%);
}

/* apenas para tooltip à direita */
.tooltip[data-direction=right] .tooltip__item {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}