28.12.2024

Formatação de Tooltips em HTML com Quebras de Linha

Resposta Rápida

Para criar quebras de linha em um tooltip, use os caracteres 
 ou 
. Estes correspondem a retorne de carro e avanço de linha, respectivamente:

<a title="Linha 1&#013;&#010;Linha 2">Passe o mouse para ver o tooltip</a>

Como resultado, o tooltip exibirá "Linha 1" acima de "Linha 2".

Compreendendo o Uso de Retornos de Carro em Tooltips HTML

O que é um Tooltip?

Um tooltip em HTML é um texto que aparece quando o cursor paira sobre um elemento. Ele é tipicamente criado usando o atributo title.

Como Separar o Texto de um Tooltip em Linhas?

Para quebrar o texto em linhas no atributo title, você pode usar entidades HTML especiais: 
 e 
. Alternativamente, você pode criar uma quebra de linha simplesmente pressionando Enter onde necessário.

Existem Problemas de Compatibilidade?

Diferentes navegadores podem interpretar os códigos de entidades de forma diferente (por exemplo, o Firefox prefere 
). Portanto, é melhor usar ambos os caracteres, 
 e 
, para garantir uma exibição consistente em todos os navegadores.

Quais são as Especificidades ao Trabalhar com JavaScript?

Se você estiver usando JavaScript, utilize \\x0A em vez de \\n para denotar uma quebra de linha. Você pode achar útil a representação hexadecimal dos caracteres.

O que Evitar?

Não use <br />, 
, \\r\\n, ou Environment.NewLine no atributo title, pois esses caracteres não serão reconhecidos pelo tooltip.

Importância de Adesão a Padrões e Consideração de Acessibilidade

Siga as especificações HTML e considere a acessibilidade. Tooltips com quebras de linha melhoram a usabilidade e a acessibilidade do conteúdo.

Visualização

Imagine um tooltip como palavras em balões:

Antes: 🎈(Olá) 🎈(Mundo)

Precisamos colocar a palavra "Mundo" abaixo da palavra "Olá". Para fazer isso, "perfuramos" o espaço entre eles com 
:

<span title="Olá&#10;Mundo">Passe o mouse sobre mim!</span>

Graças ao 
, que age como um pino, separamos as linhas, permitindo que "Mundo" caia abaixo de "Olá":

Depois: 🎈(Olá)📍
         🎈(Mundo)

E é isso! Agora nossa mensagem é exibida em duas linhas diferentes.

Dicas Adicionais e Casos Especiais na Prática

Conteúdo Dinâmico e JavaScript

JavaScript pode ser útil ao trabalhar com conteúdo dinâmico. Exemplo:

var meuElemento = document.getElementById('meuElemento');
meuElemento.setAttribute('title', 'Primeira linha\\nSegunda linha');

Usando CSS

Você pode estilizar tooltips usando CSS. Você tem a flexibilidade de criar tooltips como achar melhor, mas lembre-se: com grande poder vem grande responsabilidade.

.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Posicionamento */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

Como Tornar um Tooltip Eficaz

• Mantenha tooltips concisos e claros.
• Não use tags HTML dentro do title, exceto para caracteres especiais permitidos.
• Pense na acessibilidade: é uma das características principais dos tooltips.
• Não complique o uso de JavaScript se a tarefa puder ser resolvida usando entidades simples.

Recursos Úteis

1. Tooltip CSS — métodos para criar tooltips estilizados com CSS.
2. title - HTML: Linguagem de Marcação HiperTexto | MDN — compreensão aprofundada sobre o uso do atributo title em HTML.
3. Tooltips para Acrônimos | CSS-Tricks — técnicas avançadas para criar tooltips, especialmente para acrônimos.
4. javascript - Como gerar um popup simples usando jQuery - Stack Overflow — soluções desenvolvidas pela comunidade para popups, aplicáveis aos tooltips também.
5. Padrão HTML — recurso primário para entidades e caracteres HTML.
6. Tooltips & Toggletips — como garantir acessibilidade ao projetar tooltips inclusivos.

Video

Navigation