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

Padrão Digital de Governo

<div class="mb-3"><a class="h5" href="javascript:void(0);">Informação</a>
  <div class="br-tooltip" role="tooltip" info="info" place="top"><span class="text" role="tooltip">Fulano de Tal da Silva</span><span class="subtext">Diretor Presidente</span>
  </div>
</div>
<div class="mb-3"><a class="h5" href="javascript:void(0);">Erro</a>
  <div class="br-tooltip" role="tooltip" error="error" place="right"><span class="text" role="tooltip">Não foi possível logar!</span><span class="subtext">Verifique seus dados</span>
  </div>
</div>
<div class="mb-3"><a class="h5" href="javascript:void(0);">Sucesso</a>
  <div class="br-tooltip" role="tooltip" success="success" place="left"><span class="text" role="tooltip">Incluído com Sucesso!</span><span class="subtext">Protocolo 000.22-11</span>
  </div>
</div>
<div class="mb-3">
  <div class="br-input input-button">
    <label for="input-password">Senha</label>
    <input id="input-password" type="password" placeholder="Digite sua senha"/>
    <button class="br-button" type="button" aria-label="Exibir senha" role="switch" aria-checked="false"><i class="fas fa-eye" aria-hidden="true"></i>
    </button>
  </div>
  <div class="br-tooltip" role="tooltip" warning="warning" place="bottom" active="active" timer="10000"><span class="text" role="tooltip">O Caps Lock está ligado!</span><span class="subtext">Desative antes de digitar</span>
  </div>
</div>
<div class="mb-3"><a class="h5" href="javascript:void(0);">Advertência</a>
  <div class="br-tooltip" role="tooltip" warning="warning" place="bottom"><span class="text" role="tooltip">O Caps Lock está ligado!</span><span class="subtext">Desabilite antes de digitar</span>
  </div>
</div>