Técnico Judiciário - Área Administrativa - Especialidade: Tecnologia da Informação
O analista Xavier está implementando o design de uma página web com base no Bootstrap. Ele deve adicionar à página um elemento flutuante acionável pelo clique de um botão. O elemento flutuante deve ser exibido logo acima do botão após o clique do usuário, devendo ainda apresentar uma área específica para o título e outra específica para o conteúdo. Para acelerar a implementação, Xavier deve basear o elemento flutuante no componente mais simples do Bootstrap que reúne o maior número de atributos prontos para o comportamento desejado. Xavier deve usar como base o componente do Bootstrap:
Atoast;
Bbadge;
Ctooltip;
Dpopover;
Ebreadcrumb.
Revelar gabarito e comentário▾
GabaritoD — popover;
Comentário gerado por IA. É um apoio ao estudo, ancorado em fontes, mas pode conter imprecisões — confira sempre na fonte oficial (lei, súmula, edital e gabarito da banca). Encontrou um erro? Use “Reportar”.
Bootstrap: Componentes Flutuantes
Gabarito: letra D (popover). O popover é o componente do Bootstrap que mais se adequa: ele cria um elemento flutuante acionado por clique, pode ser posicionado acima do botão (através da opção top), e possui áreas separadas para título (title) e conteúdo (content). Exatamente como descrito no enunciado.
A questão testa o conhecimento dos principais componentes de UI do Bootstrap e suas finalidades típicas.
Alternativa A — ❌ Incorreta
Toast: Componente para notificações temporárias, geralmente posicionado de forma fixa na tela (ex.: canto superior direito). Não é acionado por clique em um botão específico, não flutua sobre o botão, e não possui designação explícita de título e conteúdo no mesmo sentido do popover (embora possa ter cabeçalho e corpo, a funcionalidade de posicionamento relativo ao gatilho não é nativa). Portanto, não atende.
Alternativa B — ❌ Incorreta
Badge: É um elemento inline para exibir contagens ou rótulos (ex.: notificações). Não é flutuante, não é acionado por clique e não possui área separada de título e conteúdo. Está fora do escopo.
Alternativa C — ❌ Incorreta
Tooltip: Exibe um texto pequeno (apenas conteúdo, sem título separado) ao passar o mouse (hover) sobre o elemento, não por clique. Embora seja um elemento flutuante, falta-lhe a área de título e o acionamento por clique (a menos que configurado manualmente, mas o padrão é hover). O popover é explicitamente desenhado para ter título e conteúdo e ser acionado por clique.
Alternativa D — ✅ Correta ⟵ GABARITO
Popover: Conforme explicado, atende a todos os requisitos: flutuante, acionado por clique, posicionável acima do botão (data-bs-placement="top"), com áreas dedicadas para título (data-bs-title) e conteúdo (data-bs-content). É o componente mais simples e completo para o comportamento desejado.
Alternativa E — ❌ Incorreta
Breadcrumb: Componente de navegação que mostra a hierarquia de páginas (ex.: Home > Categoria > Produto). Não é flutuante nem acionável por clique (os links sim, mas o componente em si não gera um popup). Totalmente inadequado.
NÃO CAIA NESSA!
A confusão mais comum é entre tooltip e popover. Ambos são componentes de sobreposição, mas o tooltip não tem título separado e por padrão é acionado por hover, enquanto o popover tem título e é acionado por clique. O enunciado pede explicitamente "título" e "conteúdo" e "acionável pelo clique" — isso mata a tooltip. Memorize: popover = título + conteúdo + clique; tooltip = só texto + hover.