.feature-tooltip {
  position: relative; /* Define a posição relativa para o elemento pai */
  cursor: pointer; /* Altera o cursor do mouse para o estilo de ponteiro */
  z-index: 1; /* Define o índice de sobreposição para o elemento pai */
}

.feature-tooltip::after {
  content: attr(title); /* Define o conteúdo do balão de pop-up como o atributo title */
  position: absolute; /* Define a posição absoluta para o balão de pop-up */
  bottom: +30px; /* Define a distância do fundo em relação ao elemento pai */
  left: 50%; /* Define a posição horizontal do balão de pop-up como o centro */
  transform: translateX(-50%); /* Centraliza o balão de pop-up horizontalmente */
  padding: 6px 12px; /* Adiciona preenchimento interno ao balão de pop-up */
  background-color: #98a1f7; /* Altera a cor de fundo do balão de pop-up (azul neste exemplo) */
  color: #fff; /* Define a cor do texto do balão de pop-up */
  font-size: 14px; /* Define o tamanho da fonte do balão de pop-up */
  font-weight: bold; /* Define o peso da fonte do balão de pop-up como negrito */
  border-radius: 4px; /* Adiciona borda arredondada ao balão de pop-up */
  opacity: 0; /* Define a opacidade inicial do balão de pop-up como 0 (invisível) */
  pointer-events: none; /* Desabilita eventos do mouse no balão de pop-up */
  transition: opacity 0.3s ease; /* Adiciona uma transição suave para a propriedade de opacidade */
  z-index: 9999; /* Define um índice de sobreposição maior para o balão de pop-up */
}

.feature-tooltip:hover::after {
  opacity: 1; /* Define a opacidade do balão de pop-up como 1 (visível) ao passar o mouse */
}