Bootstrap 5 Caixa de Diálogo

Popup emergente

O componente de popup emergente (Popover) é semelhante ao tooltip; é um popup emergente que aparece ao clicar no elemento. A diferença é que o popup emergente pode conter mais conteúdo.

Como criar um popup emergente

Para criar um popup emergente, insira data-bs-toggle="popover" propriedade adicionada ao elemento.

Use title A propriedade especifica o texto do título do popup emergente e usa data-bs-content A propriedade especifica o texto que será exibido no corpo do popup emergente:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Título do popup emergente" data-bs-content="Alguns conteúdos dentro do popup emergente">Alternar popup emergente</button>

Atenção:Os popups emergentes devem ser inicializados com JavaScript para funcionar.

O seguinte código habilitará todos os popups emergentes no documento:

Exemplo

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Experimente pessoalmente

Posicionamento do popup emergente

Por padrão, o popup emergente aparecerá no lado direito do elemento.

Use data-bs-placement Configuração da posição do popup emergente no topo, fundo, lado esquerdo ou lado direito do elemento:

Exemplo

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Conteúdo">Esquerda</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Conteúdo">Direita</a>

Experimente pessoalmente

Atenção:Se não houver espaço suficiente, o atributo placement não funcionará conforme o esperado. Por exemplo: Se você usar a propriedade de placement top na parte superior da página (sem espaço reservado), ela será exibida abaixo ou à direita do elemento (qualquer lugar com espaço).

Fechar caixa de diálogo

Por padrão, a janela de diálogo será fechada ao clicar novamente no elemento. No entanto, você pode usar data-bs-trigger="focus" Atributo, configure este atributo para fechar a janela de diálogo ao clicar fora do elemento:

Exemplo

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Clique em qualquer lugar do documento para fechar esta janela de diálogo">Clique em mim</a>

Experimente pessoalmente

Caixa de diálogo de passar o mouse

Dica:Se você quiser que a caixa de diálogo seja exibida quando o ponteiro do mouse for movido sobre o elemento, use o valor "hover" do data-bs-trigger Atributo:

Exemplo

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Texto da caixa de diálogo">Passe o mouse sobre mim</a>

Experimente pessoalmente