Bootstrap4 Tutorial Básico

Bootstrap4 Caixa de Dialogo Bootstrap4 Janela Modais

Bootstrap4 Caixa de dicas

A caixa de dicas é uma pequena janela popup, que é exibida quando o mouse é movido sobre o elemento e desaparece quando o mouse é movido para fora do elemento.

Como criar uma caixa de dicas

Adicione data-toggle="tooltip" Vamos criar uma caixa de dicas.

O conteúdo da propriedade title é o que é exibido na caixa de dicas:

<a href="#" data-toggle="tooltip" title=" sou conteúdo de dica! "> Move o mouse para aqui</a>

Atenção: A caixa de dicas deve ser escrita no código de inicialização do jQuery: Em seguida, chame o método tooltip() no elemento especificado.

Os seguintes exemplos podem usar a caixa de dicas em qualquer lugar do documento:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2> Exemplo de caixa de dicas</h2><br>
　　<a href="#" data-toggle="tooltip" title=" sou conteúdo de dica! "> Move o mouse para aqui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Teste e veja ‹/›

Efeito após a execução如下:

Especifique a posição da caixa de dicas

Por padrão, a caixa de dicas é exibida acima do elemento.

Você pode usar data-A propriedade placement define a direção de exibição da caixa de dicas: top, bottom, left ou right:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2> Exemplo de caixa de dicas</h2><br>
　　<a href="#" data-toggle="tooltip" data-placement="top" title=" sou conteúdo de dica! "> Move o mouse para aqui</a>
　　<a href="#" data-toggle="tooltip" data-placement="bottom" title=" sou conteúdo de dica! "> Move o mouse para aqui</a>
　　<a href="#" data-toggle="tooltip" data-placement="left" title="Sou o conteúdo do tooltip!">Passa o mouse aqui</a>
　　<a href="#" data-toggle="tooltip" data-placement="right" title="Sou o conteúdo do tooltip!">Passa o mouse aqui</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Teste e veja ‹/›

Efeito após a execução如下:

Usar no botão:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip na parte superior">
	　　Tooltip na parte superior
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip à direita">
	　　Tooltip à direita
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip na parte inferior">
	　　Tooltip na parte inferior
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip à esquerda">
	　　Tooltip à esquerda
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Teste e veja ‹/›

Efeito após a execução如下:

Adicionar conteúdo de tooltip com tags HTML, configurar data-html="true", conteúdo colocado dentro da tag title:

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip/em> <u>com/u> <b>HTML/b>
　　Tooltip com HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Teste e veja ‹/›

Efeito após a execução如下:

禁用按钮：

示例

<!DOCTYPE html>
<html>
<head>
　　<title>Bootstrap 示例</title>
　　<meta charset="utf-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1">
　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
	<span　class="d-inline-block"　tabindex="0"　data-toggle="tooltip"　title="Tooltip Desativado">
	　　<button　class="btn　btn-primary"　style="pointer-events:　none;"　type="button"　disabled>Botão Desativado</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Teste e veja ‹/›

Efeito após a execução如下:

Bootstrap4 Caixa de Dialogo Bootstrap4 Janela Modais