Bootstrap4 Tutoriel de base

Bootstrap4 Boîte de dialogue Bootstrap4 Boîte de dialogue

Bootstrap4 Boîte de dialogue

La boîte de dialogue est une petite fenêtre contextuelle qui s'affiche lorsque le curseur est déplacé sur l'élément et disparaît lorsque le curseur est déplacé en dehors de l'élément.

Comment créer une boîte de dialogue

En ajoutant data-toggle="tooltip" Créons une boîte de dialogue.

Le contenu de l'attribut title est le contenu affiché dans la boîte de dialogue :

<a href="#" data-toggle="tooltip" title="Je suis le contenu de l'indication!">Déplacez le curseur ici</a>

Attention: La boîte de dialogue doit être écrite dans le code d'initialisation de jQuery : puis appeler la méthode tooltip() sur l'élément spécifié.

Les exemples suivants peuvent être utilisés partout dans le document :

示例

<!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>Exemple de boîte de dialogue</h2><br>
　　<a href="#" data-toggle="tooltip" title="Je suis le contenu de l'indication!">Déplacez le curseur ici</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Effet après l'exécution comme suit:

Spécifiez la position de la boîte de dialogue

Par défaut, la boîte de dialogue s'affiche en haut de l'élément.

Vous pouvez utiliser data-L'attribut placement permet de définir la direction de l'affichage de la boîte de dialogue : 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>Exemple de boîte de dialogue</h2><br>
　　<a href="#" data-toggle="tooltip" data-placement="top" title="Je suis le contenu de l'indication!">Déplacez le curseur ici</a>
　　<a href="#" data-toggle="tooltip" data-placement="bottom" title="Je suis le contenu de l'indication!">Déplacez le curseur ici</a>
　　<a href="#" data-toggle="tooltip" data-placement="left" title="我是提示内容!">Souris sur moi</a>
　　<a href="#" data-toggle="tooltip" data-placement="right" title="我是提示内容!">Souris sur moi</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Effet après l'exécution comme suit:

在按钮中使用:

示例

<!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 on top">
	　　Tooltip on top
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
	　　Tooltip on right
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
	　　Tooltip on bottom
	</button>
	<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
	　　Tooltip on left
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Effet après l'exécution comme suit:

提示内容添加 HTML 标签，设置 data-html="true"，内容放在 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>with</u> <b>HTML</b>
　　Tooltip with HTML
</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Effet après l'exécution comme suit:

禁用按钮：

示例

<!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="Bouton désactivé">
	　　<button　class="btn　btn-primary"　style="pointer-events:　none;"　type="button"　disabled> Bouton désactivé</button>
	</span>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="tooltip"]').tooltip();　　　
});
</script>
</body>
</html>

Voyons un test ‹/›

Effet après l'exécution comme suit:

Bootstrap4 Boîte de dialogue Bootstrap4 Boîte de dialogue