30.11.2024

Adicionando Quebras de Linha em Tooltips HTML: Uma Solução

Resposta Rápida

Para inserir quebras de linha em tooltips, utilize as entidades HTML 
 ou 
 no atributo title.

<a title="Primeira linha&#013;Segunda linha">Passe o mouse aqui!</a>

Você pode colocar essas entidades onde quiser para indicar o início de uma nova linha. Dessa forma, o texto do tooltip será exibido linha por linha ao passar o mouse sobre o link.

Métodos Alternativos e Ferramentas Adicionais

Além das entidades HTML, há muitos métodos para formatar tooltips e inserir quebras de linha. Vamos explorar alguns deles.

Usando CSS para Personalizar a Formatação do Texto

CSS permite que você ajuste com precisão a aparência de tooltips personalizados:

/* CSS que aprofunda na estrutura */
.tooltip-inner {
  white-space: pre-wrap; /* Respeita espaços e quebras de linha */
}

Aplique essa propriedade CSS ao conteúdo do tooltip e adicione quebras de linha diretamente no editor de texto. Pronto! Agora o texto no tooltip terá quebras de linha.

Plugins de Tooltip: Funcionalidade em um Formato Interativo

Se você está usando plugins de tooltip, como o Bootstrap, o atributo data-html="true" fornecerá novas opções:

<a href="#" data-toggle="tooltip" data-html="true" title="Linha1<br>Linha2">Passe o mouse aqui!</a>

Nesse caso, o atributo title pode conter HTML, permitindo o uso da tag <br> para quebras de linha.

Formatação de Texto para Mais do que Apenas Casos Especiais

Se seus tooltips exigem formatação especial, como blocos de código, a tag <pre> e a propriedade CSS white-space: pre-line; serão úteis:

/* CSS que controla a formatação do texto */
.tooltip-inner {
  white-space: pre-line; /* Respeita quebras de linha e espaços */
}

E o HTML correspondente:

<a href="#" title="<pre>Linha1\nLinha2</pre>" data-html="true">Passe o mouse aqui!</a>

Tornando os Tooltips Mais Amigáveis

Acessibilidade é parte integral de uma boa experiência do usuário. Use o atributo aria-describedby e siga os padrões WAI-ARIA. Seus esforços ajudarão os usuários a utilizar tecnologias assistivas!

Visualização

A visualização ajuda a entender melhor o que foi feito — vamos detalhar:

<a href="#" title="Linha1&#10;Linha2">Passe o mouse aqui!</a>

Ao passar o mouse, um tooltip aparece, e não é apenas um qualquer; é um tooltip com duas linhas!

Antes: [💬 "Olá! Juntos somos fortes!"]
Depois: [💬 "Olá!"
         💬 "Juntos somos fortes!"]

Gostou? Este é o efeito mágico do 
. 🖱️ ➡️ 💬 ➡️ 💬 ➡️ 😄

Recursos Úteis

1. title - HTML: HyperText Markup Language | MDN — uma descrição detalhada do atributo title em HTML.
2. Tooltip CSS — gerenciando tooltips com CSS: um guia prático.
3. Javascript - jQuery: Excluindo Elementos Filhos de .text() - Stack Overflow — uma discussão sobre manipulação de texto na comunidade Stack Overflow.
4. Guia de Práticas para Autores ARIA | APG | WAI | W3C — aria-describedby e melhores práticas para a acessibilidade de tooltips; um guia sobre acessibilidade de tooltips.
5. Coleção CodePen: Vários Designs e Animações de Tooltip — uma coleção de exemplos de tooltips com designs e animações diversas.

Video

Navigation