Le plugin popover de bootstrap est très similaire aux info-bulles. Il apparaît sous forme de boîte de dialogue lorsque l’utilisateur clique sur un élément. La différence est que le popover peut contenir beaucoup plus de contenu.
Pour créer un popover, ajoutez l’attribut data-toggle = "popover"à un élément et l’attribut title pour spécifier le texte d’en-tête du popover, l’attribut data-content pour spécifier le texte à afficher dans le corps du popover.
Voir cet exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Exemple Popover</h3>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Contenu a l interieur de Popover">Cliquez popover</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Résultat :
Bootstrap positionnement de Popovers
Par défaut, le popover apparaît sur le côté de l’élément, mais vous pouvez définir une position du popover où vous le souhaitez, comme haut, bas, côté et gauche.
Utilisez l’attribut data-placement pour définir la position du popover en haut, en bas, à gauche ou à droite de l’élément.
Voir cet exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Exemple</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Exemple de Popover </h3>
<ul class="list-inline">
<li><a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Top</a></li>
<li><a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Bottom</a></li>
<li><a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Left</a></li>
<li><a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Right</a></li>
</ul>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Résultat :
Bootstrap fermeture de Popovers
Par défaut, le popover est fermé lorsque vous cliquez à nouveau sur l’élément. Mais vous pouvez utiliser l’attribut data-trigger = "focus" pour fermer la fenêtre lorsque vous cliquez en dehors de l’élément.
Voir cet exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Example Popover </h3>
<a href="#" title="Popover" data-toggle="popover" data-trigger="focus" data-content="Cliquez n'importe où dans le document pour fermer ce popover">Cliquez sur moi</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Résultat :
