01.12.2024

Adicionando Tooltips a um Elemento Span: HTML, CSS, JS

Resumo Rápido

Tudo que você precisa para adicionar um tooltip a um elemento span é o atributo title:

<span title="Texto do tooltip">Passe o mouse sobre mim!</span>

Quando o cursor passa sobre o elemento, o texto do tooltip é exibido.

Capacidades e Limitações do Atributo Title

O atributo title é uma solução simples e conveniente. No entanto, é importante considerar que suas capacidades não são ilimitadas. Por exemplo, você não pode alterar o estilo do tooltip; isso depende do navegador. Se você precisar de configurações de tooltip mais flexíveis, é hora de utilizar CSS e JavaScript.

Visualização

O atributo title pode ser comparado a uma mala com uma etiqueta de bagagem anexada:

Antes:   🏷 (Seu span)
Depois:  🏷💬 (Seu span com tooltip)

É como um rótulo que anexamos ao elemento span:

<span title="Este é seu tooltip!">Passe o mouse sobre mim!</span>

Quando você passa o cursor, o tooltip aparecerá, assim como em um pop-up: ⬆️👆.

Tooltips Elegantes com CSS

Para criar um tooltip estiloso usando CSS, utilize os pseudo-elementos :before e :after.

/* Wrapper para o tooltip */
.tooltip { 
  position: relative; 
  display: inline-block; 
}

/* Texto do tooltip */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px; 
  padding: 5px;
  position: absolute; 
  z-index: 1;
  bottom: 125%;
  left: 50%; 
  margin-left: -60px;

  /* Animação de fade-in */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Seta do tooltip */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%; 
  left: 50%; 
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Exibir tooltip ao passar o mouse */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

Esse método permite centralizar o tooltip em relação ao elemento e alcançar um suave efeito de fade-in.

Técnicas Avançadas de CSS para Tooltips

Usando a Função attr()

Você pode incluir texto dinâmico do tooltip em um atributo de dados do elemento:

<span class="tooltip" data-tooltip="Texto do tooltip dinâmico">Passe o mouse sobre mim!</span>

Depois, usando a função attr(), você pode recuperá-lo para exibição no tooltip:

.tooltip::after {
  content: attr(data-tooltip);
  /* outras configurações de estilo */
}

Posicionamento Inteligente do Tooltip

Se for crucial garantir que o tooltip sempre se encaixe dentro dos limites da tela, o CSS pode ajudar. Você pode empregar várias estratégias de posicionamento dependendo da localização do elemento na janela do navegador.

Ampliando as Capacidades do Tooltip com JavaScript e jQuery

Para aplicar efeitos visuais mais avançados, tratar eventos ou implementar interatividade ao criar tooltips, utilize JavaScript e bibliotecas como jQuery UI. Em particular, o jQuery UI permite personalizar o posicionamento do tooltip, inserir conteúdos diferentes e controlar a duração em que o tooltip permanece visível:

$(function() {
  $(document).tooltip({
    position: {
      my: "left+15 center", 
      at: "right center"
    },
    show: { 
      effect: "slideDown", 
      delay: 250
    },
    // adicione opções adicionais conforme necessário
  });
});

Isso demonstra a flexibilidade e o poder do jQuery UI, que fornece inúmeras configurações para estilizar tooltips.

Recursos Úteis

1. title - HTML: Linguagem de Marcação de Hipertexto | MDN — informações detalhadas sobre o atributo title para tooltips em HTML.
2. CSS Tooltip — um tutorial sobre como criar tooltips com CSS.
3. Como adicionar CSS com JavaScript? - Stack Overflow — informações adicionais sobre estilizar tooltips com JavaScript.
4. Aguarde um momento... — um exemplo de implementação de um tooltip com CSS puro no CodePen.
5. Diretrizes de Tooltip — recomendações para criar tooltips eficazes para websites.

Video

Navigation