@govbr-ds/core/dist/components/tooltip/examples/tooltip-popover.html

Padrão Digital de Governo

<div class="mb-3"><a class="h5" href="javascript:void(0);">PopOver Simples</a>
  <div class="br-tooltip" role="tooltip" success="success" popover="popover" timer="5000" place="bottom">
    <div class="popover-header"><span class="text">Cadastro Concluído!</span>
    </div>
    <div class="popover-body"><span class="subtext">Para verificar mais detalhes a respeito do seu acesso, clique no link abaixo.</span>
    </div>
    <div class="popover-footer"><a class="link" href="javascript:void(0)">Clique aqui</a>
    </div>
  </div>
</div>
<div class="mb-3"><a class="h5" href="javascript:void(0);">PopOver com imagem</a>
  <div class="br-tooltip" role="tooltip" info="info" popover="popover" place="bottom" timer="4000">
    <div class="popover-image"><img src="https://picsum.photos/80" alt="Avatar"/>
    </div>
    <div class="div">
      <div class="popover-header"><span class="text">Fulano de Tal da Silva</span>
      </div>
      <div class="popover-body"><span class="subtext">Diretor Presidente</span>
      </div>
    </div>
  </div>
</div>
<div class="mb-3"><a class="h5" href="javascript:void(0);">PopOver com ícone - Erro</a>
  <div class="br-tooltip" role="tooltip" error="error" popover="popover" place="left" timer="3000">
    <div class="popover-icon"><i class="fas fa-ban fa-3x" aria-hidden="true"></i>
    </div>
    <div class="div">
      <div class="popover-header"><span class="text">Fulano de Tal da Silva</span>
      </div>
      <div class="popover-body"><span class="subtext">Essa ação só é permitida após o preenchimento dos campos no formulário!</span>
      </div>
    </div>
  </div>
</div>
<div class="mb-3"><a class="h5" href="javascript:void(0);">PopOver com ícone e botão- Warning</a>
  <div class="br-tooltip" role="tooltip" warning="warning" popover="popover" place="right">
    <div class="popover-icon"><i class="fas fa-exclamation-triangle fa-3x" aria-hidden="true"></i>
    </div>
    <div class="div">
      <div class="popover-body"><span class="subtext">É recomendado que o cadastro seja atualizado antes de prosseguir.</span>
      </div>
      <div class="popover-footer">
        <button class="br-button primary" type="button"><span>Atualizar</span>
        </button>
      </div>
    </div>
  </div>
</div>