12.12.2024

Usando HTML Dentro dos Popovers do Bootstrap

Resposta Rápida

Você pode usar conteúdo HTML nos popovers do Bootstrap definindo-o através do parâmetro content e ajustando a opção html para verdadeiro:

$('[data-toggle="popover"]').popover({
  html: true,
  content: '<strong>Texto destacado</strong> e <a href="#">links</a>.'
});

A interpretação de HTML será habilitada para todos os elementos com o atributo data-toggle="popover".

Aprimore o Popover com Interatividade

Torne seu popover um elemento interativo usando uma função para carregar dinamicamente o conteúdo HTML:

$('#popoverElement').popover({
  html: true,
  content: function() {
    return $('#contentForPopover').html();
  }
});

Esse conteúdo pode estar oculto na página ou ser gerado dinamicamente.

Proteja Seu Conteúdo

Ao carregar HTML nos popovers, preste atenção à segurança para prevenir potenciais ataques XSS. Utilize a sanitização para esse propósito:

const safeContent = DOMPurify.sanitize(unsafeContent); 
$('#popoverElement').popover({
  html: true,
  content: safeContent 
});

Personalize Seus Popovers

Você pode personalizar os popovers usando os atributos data-trigger e data-placement:

<a role="button" data-toggle="popover" data-trigger="focus" data-placement="right" title="Título" data-content="Adivinhe o conteúdo">Clique para abrir</a>

Diferencie Conteúdos e Títulos

Use os atributos data-content e title para uma diferenciação mais clara entre conteúdos e títulos:

<button type="button" title="Título" data-container="body" data-toggle="popover" data-placement="top" data-content="Abra o popover">
  Popover por cima
</button>

O atributo data-container="body" permite controlar a saída dos popovers dentro da tag body e evitar problemas de overflow.

Organizando o Conteúdo do Popover

Você pode esconder o conteúdo do popover em containers invisíveis:

<div id="contentForPopover" style="display: none;">
  <img src="imagem.jpg"> 
</div>

Visualização

Os popovers no Bootstrap são ferramentas interativas multifuncionais:

Balão regular (🎈): Entrega simples de texto.

Popover do Bootstrap com Vue.js (🎈💬): [🔧, 🖼️, 🎯, 💻]

Elementos HTML (⚙️, 🖼️) preenchem o balão com conteúdo útil.

Apenas um clique e uma gama inteira de possibilidades se abre para o usuário:

🎈💬 ➡️ Clique! ➡️ [🔧 Painel interativo, 🖼️ Mini-galeria, 🎯 Blocos de informação, 💻 Visão geral do código]

# Você pode ser o mágico, realizando truques com o popover.

Não Esqueça de Testar

Lembre-se de inicializar seus popovers verificando os atributos e rodando o JavaScript após sua configuração:

$(function(){
  $('.popover-with-html').popover({ html: true });
});

Tenha em mente que testes rigorosos garantirão o funcionamento confiável dos popovers em qualquer navegador.

Várias Dicas para Usar Popovers

Dê Vida ao Conteúdo com JavaScript

$("#dynamicPopover").popover({
  html: true,
  content: fetchDynamicContent 
});

Preste Atenção Especial aos Links <a>

Leve em consideração que você pode gerenciar o comportamento dos links usando event.preventDefault().

Recursos Úteis

1. Popovers · Bootstrap — O guia oficial do Bootstrap sobre como criar popovers.
2. Spoofing de Conteúdo | OWASP — Informações sobre como proteger conteúdo HTML.
3. Atributo HTML data-* — Informações detalhadas sobre atributos data-*.
4. Formatação de Texto em JavaScript | MDN — Um guia sobre como trabalhar com HTML em JavaScript.
5. GitHub - cure53/DOMPurify — Uma ferramenta para limpar strings HTML de conteúdo potencialmente perigoso.

Video

Navigation