Tooltip de Múltiplas Linhas em HTML: Quebra de Linha no Atributo Title
Resumo Rápido
Você pode criar texto de múltiplas linhas em um tooltip ao passar o mouse sobre um elemento utilizando no atributo title do elemento <td>.
Exemplo:
<td title="Linha 1 Linha 2">Passe o mouse sobre mim</td>O resultado será um tooltip com duas linhas onde "Linha 1" está acima de "Linha 2".
Alternativas ao Atributo title em HTML
O atributo title é apenas uma das maneiras de exibir tooltips. Os desenvolvedores têm outras opções à disposição, incluindo OverLib ou a possibilidade de criar tooltips com CSS puro, que oferecem um controle mais detalhado sobre a aparência e o conteúdo dos tooltips.
<td data-tooltip="Primeira linha<br>Segunda linha">Passe o mouse sobre mim</td>Bibliotecas JavaScript ajudam na criação de tooltips com conteúdo HTML e animação, enquanto tooltips em CSS oferecem mais opções de estilo e interação.
Nota: Verifique a exibição de seus tooltips no Internet Explorer, Firefox v12+ e Chrome 28+ para garantir que funcionem corretamente.
Criando Tooltips de Múltiplas Linhas Usando CSS
Para criar um tooltip de múltiplas linhas com CSS, basta inserir o texto dentro de um div ou usar <br>, após o que você pode estilizar e posicionar usando CSS.
Posicionamento e Estilo
A exibição e percepção do tooltip será aprimorada se estiverem próximos de elementos relacionados e tiverem um bom design utilizando fundos e bordas de qualidade.
Transições
Para fazer os tooltips aparecerem de maneira mais suave e atraente, utilize transições.
Opções de Conteúdo de Recurso
Preste atenção na compatibilidade retroativa com o atributo alt ou rótulos ARIA para que os usuários possam acessar as informações necessárias mesmo se o CSS ou JavaScript estiverem desativados.
Ampliando as Capacidades do Tooltip com Bibliotecas JavaScript
Bibliotecas JavaScript como OverLib expandem a funcionalidade dos tooltips padrão, oferecendo opções adicionais de estilo.
Layouts Personalizados
Você pode ajustar finamente a aparência dos tooltips ao embutir vários conteúdos HTML dependendo das necessidades específicas do seu projeto.
Controle da Experiência do Usuário
A função principal dos tooltips é melhorar a interação do usuário, mas também é importante garantir que os tooltips não interfiram na navegação.
Busque uma Degradação Suave da Funcionalidade
Considere usuários que tenham desativado o JavaScript. Para eles, é essencial oferecer a opção de entender o conteúdo através do title.
Recursos Úteis
- Requisição post em JavaScript como um envio de formulário - Stack Overflow – exemplo de simulação de envio de formulário usando JavaScript.
- Tooltip CSS - W3Schools – tutorial sobre como criar tooltips com CSS.
- title - HTML: Linguagem de Marcação HiperTexto | MDN – informações detalhadas do MDN sobre o atributo title em HTML.
- aria-label é xenofóbico: HeydonWorks – artigo sobre codificação de entidades HTML para melhorar a acessibilidade.
- Entidades de Caracteres HTML - W3Schools – guia de referência sobre entidades HTML.
- Inspiração para Estilos de Tooltip | Codrops – uma galeria de soluções de estilo para tooltips que podem inspirar novas ideias.
- Usando atributos de dados - Aprenda desenvolvimento web | MDN – guia sobre como usar atributos de dados em HTML.