@govbr-ds/core
Version:
Padrão Digital de Governo
242 lines • 11.6 kB
HTML
<html lang="pt-BR">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<title>Tooltip</title>
<!-- Fonte Rawline-->
<link rel="stylesheet" href="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/fonts/rawline/css/rawline.css"/>
<!-- Fonte Raleway-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700,800,900&display=swap"/>
<!-- Design System de Governo-->
<link rel="stylesheet" href="../../core.css"/>
<!-- Fontawesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css"/>
</head>
<body>
<div class="container-fluid">
<div class="container-lg">
<div class="row align-items-center">
<div class="col-md-6">
<div class="br-list condensed">
<div class="header">
<div class="title">Tooltip</div>
</div>
<div class="br-item">
<div class="content"><strong>Tipo:</strong>texto simples</div>
</div>
<div class="br-item">
<div class="content"><strong>Comportamento:</strong>mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Permanência:</strong>por evento mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Direção:</strong>padrão (em cima)</div>
</div>
<div class="br-item">
<div class="content"><strong>Semântica:</strong>padrão (informação)</div>
</div>
</div>
</div>
<div class="col-md-6 text-center"><a href="javascript:void(0);"><img src="https://picsum.photos/50" alt="Avatar"/></a>
<div class="br-tooltip" role="tooltip"><span class="text" role="tooltip">Texto de Informação!</span>
</div>
</div>
</div>
<hr/>
<div class="row align-items-center">
<div class="col-md-6">
<div class="br-list condensed">
<div class="header">
<div class="title">Tooltip</div>
</div>
<div class="br-item">
<div class="content"><strong>Tipo:</strong>texto auxiliar</div>
</div>
<div class="br-item">
<div class="content"><strong>Comportamento:</strong>mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Permanência:</strong>por evento mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Direção:</strong>em cima, à esquerda, à direita e em baixo</div>
</div>
<div class="br-item">
<div class="content"><strong>Semântica:</strong>informação, sucesso, erro e advertência</div>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="mb-3"><a class="h4" 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="h4" 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"><a class="h4" 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="h4" 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>
</div>
</div>
<hr/>
<div class="row align-items-center">
<div class="col-md-6">
<div class="br-list condensed">
<div class="header">
<div class="title">Tooltip</div>
</div>
<div class="br-item">
<div class="content"><strong>Tipo:</strong>texto com input</div>
</div>
<div class="br-item">
<div class="content"><strong>Comportamento:</strong>onload</div>
</div>
<div class="br-item">
<div class="content"><strong>Permanência:</strong>tempo (10s)</div>
</div>
<div class="br-item">
<div class="content"><strong>Direção:</strong>em baixo</div>
</div>
<div class="br-item">
<div class="content"><strong>Semântica:</strong>advertência</div>
</div>
</div>
</div>
<div class="col-md-6">
<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>
<hr/>
<div class="row align-items-center">
<div class="col-md-6">
<div class="br-list condensed">
<div class="header">
<div class="title">PopOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Tipo:</strong>popover simples</div>
</div>
<div class="br-item">
<div class="content"><strong>Comportamento:</strong>mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Permanência:</strong>tempo (5s) ou ação direta do usuário</div>
</div>
<div class="br-item">
<div class="content"><strong>Direção:</strong>em baixo</div>
</div>
<div class="br-item">
<div class="content"><strong>Semântica:</strong>sucesso</div>
</div>
</div>
</div>
<div class="col-md-6 text-center"><a class="h4" 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>
<hr/>
<div class="row align-items-center">
<div class="col-md-6">
<div class="br-list condensed">
<div class="header">
<div class="title">PopOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Tipo:</strong>popover com ícone e botão</div>
</div>
<div class="br-item">
<div class="content"><strong>Comportamento:</strong>mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Permanência:</strong>ação direta do usuário</div>
</div>
<div class="br-item">
<div class="content"><strong>Direção:</strong>à direita (conflito de limite de tela)</div>
</div>
<div class="br-item">
<div class="content"><strong>Semântica:</strong>adverência</div>
</div>
</div>
</div>
<div class="col-md-6 text-center"><a class="h4" 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>
</div>
<hr/>
<div class="row align-items-center">
<div class="col-md-6">
<div class="br-list condensed">
<div class="header">
<div class="title">PopOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Tipo:</strong>popover com ícone</div>
</div>
<div class="br-item">
<div class="content"><strong>Comportamento:</strong>mouseOver</div>
</div>
<div class="br-item">
<div class="content"><strong>Permanência:</strong>tempo (3s) ou ação direta do usuário</div>
</div>
<div class="br-item">
<div class="content"><strong>Direção:</strong>à esquerda</div>
</div>
<div class="br-item">
<div class="content"><strong>Semântica:</strong>erro</div>
</div>
</div>
</div>
<div class="col-md-6 text-center"><a class="h4" 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>
<hr/>
</div>
</div>
<script src="../../core-init.js"></script>
</body>
</html>