Popovers em Bootstrap 5

Popovers são semelhantes às dicas de ferramentas, mas contêm mais informações sobre um elemento específico e mostram apenas seu conteúdo quando um usuário clica neles. As popovers podem ser descartadas apenas clicando no elemento novamente. O objetivo do popover é dar conhecimento do usuário sobre o site ou como usá -lo. Também é usado para fornecer conhecimento descritivo sobre um produto quando o usuário exige.

Este artigo fala sobre

• Processo de criação de Popover
• Posições de popover
• Popover de fechamento
• Popover sobre pairando

Como criar popovers

Para criar um popover, adicione data-bs-toggle = "popover" e title = ”O texto do cabeçalho da popa é aqui” para a seção de cabeçalho de Popover e data-bs-content = ”O texto do corpo da popover vai aqui” para a seção corporal de Popover.

Código

Clique

Este processo cria e permite um popover básico.

Posições de popover

Portanto, as popovers também estão posicionadas como dicas de ferramentas, para posicionar um uso de popover data-bs-posting = ”top/inferior/direita/esquerda” atributo com Data-Bs-Toggle, título e Data-BS-Content atributos.

Código

Posições de popover

Principal
Buttom



Esquerda
Certo

É assim que as posições de popover são especificadas.

Popovers de fechamento

As popovers são fechadas apenas quando você clica no elemento ou botão novamente para o qual você clica antes para torná -lo visível. No entanto, se você deseja fechar o popover clicando em qualquer lugar na tela, basta adicionar Data-Bs-Trigger = "Focus" atributo ao seu botão ou elemento.

Código

Popover de fechamento

Clique em mim

Este processo fecha um popover quando você clica em qualquer lugar na tela.

Popover em pairar

Como sabemos, popovers só são visíveis ao clicar em um botão ou elemento, mas se você deseja que esse popover seja visível apenas pairando o cursor sobre o elemento ou botão como a dica de ferramenta, adicione o data-bs-trigger = "pairar" atributo ao seu botão ou elemento.

Código

Popover em pairar

Flutuar

É assim que a povover aparece em pairando.

Conclusão

Popover é criado adicionando o data-bs-toggle = "popover" atributo. Seu cabeçalho é criado adicionando Title = “Texto do cabeçalho” atributo e seu corpo é criado adicionando o Data-BS-Content = “Texto do corpo” atribuir ao seu elemento ou botão. Para permitir que Popover escreva um código JavaScript, conforme escrito no artigo. À medida que o Popover é fechado apenas clicando no elemento ou botão novamente; portanto, para fechar clicando em qualquer lugar na tela, basta adicionar Data-Bs-Trigger = “Focus” atributo, e se você deseja abrir o popover, passando o cursor, só adicione o atributo Data-Bs-Trigger = “Passe”.