06.02.2025

Tooltips em Múltiplas Linhas no Bootstrap Sem <br>

Resposta Rápida

Se você deseja criar tooltips do Bootstrap com várias linhas, ative o suporte a HTML nos atributos definindo data-html="true". Utilize a tag <br> para adicionar quebras de linha no atributo title:

<a href="#" data-toggle="tooltip" data-html="true" title="Primeira linha<br>Segunda linha">Passe o mouse sobre mim</a>

Use o seguinte código JavaScript para inicializar os tooltips:

// Inicializa os tooltips com a função tooltip
$('[data-toggle="tooltip"]').tooltip();

Por fim, aplique a codificação HTML para quebras de linha (
 ou 
) se já estiverem embutidas no atributo HTML durante o carregamento da página. Adicionar esses códigos dinamicamente não será eficaz.

Adicionando Quebras de Linha nos Tooltips

Usando Tags <br> e Quebras de Linha Codificadas em HTML

As tags <br> servem para criar tooltips com múltiplas linhas. Se você deseja integrar conteúdo gerado dinamicamente a partir do servidor, utilize quebras de linha codificadas em HTML, como 
.

Aplicando a Propriedade CSS white-space

Ao personalizar o estilo dos tooltips, use as propriedades white-space: pre; ou white-space: pre-wrap; para considerar quebras de linha e a quebra automática de texto.

/* Estilização do tooltip */
.tooltip-inner {
  white-space: pre-wrap;
}

Ampliando a Funcionalidade do Tooltip

Habilitando o Processamento de HTML nos Tooltips

Para usar tags HTML nos tooltips, ative a opção data-html="true" no Bootstrap. Isso permite o processamento de tags como <br>, <strong>, entre outras.

Integração com Angular UI Bootstrap

Se você estiver usando Angular e Angular UI Bootstrap, utilize o atributo uib-tooltip-html. Para evitar problemas potenciais com a sanitização do conteúdo, use $sce.trustAsHtml().

// Use $sce.trustAsHtml para garantir a segurança do conteúdo HTML
$scope.safeContent = $sce.trustAsHtml('Primeira linha<br>Segunda linha');

Prefira utilizar tooltip-html em vez do depreciado tooltip-html-unsafe.

<button uib-tooltip-html="safeContent">Passe o mouse sobre mim!</button>

Considerações sobre o Uso de Tooltips

Gerenciando Quebras de Linha nos Tooltips

Se o texto no tooltip ficar muito longo, assegure-se de que max-width ou white-space: pre-wrap; estejam especificados nas propriedades CSS. Isso ajudará a evitar que o texto ultrapasse o elemento.

Evite Inserir HTML Diretamente nos Atributos Title

Não insira HTML diretamente nos atributos title. Em vez disso, utilize atributos de dados especializados como data-original-title no Bootstrap.

Mantenha os Frameworks Atualizados

Atualize regularmente suas bibliotecas JavaScript. Isso permitirá que você acesse novos recursos e melhorias para os tooltips.

Visualização

Entenda os princípios de criação de tooltips em múltiplas linhas através de nossa representação visual de um "sanduíche":

🥪 — Sanduíche de Tooltip
_____________
| Folha de alface 🥬   | <--- Tooltip com uma nova linha
| Tomate 🍅            | <--- Esta já é outra linha
| Fatia de queijo 🧀   | <--- E mais uma linha
_____________

Para "montar" esse "sanduíche", basta definir data-html=true e inserir quebras de linha usando <br>:

<button data-toggle="tooltip" data-html="true" title="Folha de alface 🥬<br>Tomate 🍅<br>Fatia de queijo 🧀">
  Passe o mouse sobre mim!
</button>

Desfrute de seus "sanduíches" na forma de tooltips em múltiplas linhas todos os dias!

Expandindo Seu Conjunto de Ferramentas

Usando rel="tooltip" para Elementos Que Não São Links

Para adicionar tooltips a elementos que não possuem um atributo title padrão, aplique rel="tooltip".

Diversas Aplicações de Tooltips

Os tooltips podem ser usados em várias situações—de Vuex a Redux. Dependendo da tarefa, os tooltips podem conter texto compacto ou complexo em várias linhas. O principal é manter a legibilidade em mente.

Aprenda Praticando com Exemplos no jsFiddle

Prefere aprender de forma interativa? Explore e experimente códigos no jsFiddle, que apresenta exemplos de uso de tooltips simples e complexos.

Recursos Úteis

1. A documentação oficial do tooltip do Bootstrap ajudará você a dominar todas as nuances de seu uso.
2. W3Schools fornecerá conhecimento sobre o básico de trabalhar com tooltips do Bootstrap.
3. Estude as recomendações do MDN sobre o uso da tag <abbr> em tooltips.
4. Preste atenção nos relatos de problemas sobre tooltips e suas configurações no GitHub.
5. Não deixe de explorar o código-fonte do Tooltip.js do Bootstrap para ter uma compreensão mais profunda de seu funcionamento.

Video

Navigation