Bootstrap Popover

Description

Bootstrap Popover est créé à l'aide d'un plugin Jquery personnalisé. Il peut être utilisé pour afficher des informations pour n'importe quel élément.

Dans ce tutoriel, vous verrez comment utiliser Bootstrap Popover et comment le personnaliser à l'aide de certaines des options disponibles.

Ce qui est requis

Vous devez référencer Jquery, Bootstrap CSS et deux fichiers JavaScript - un pour Bootstrap Tooltip (plugin tooltip) et un pour Bootstrap Popover.

Le fichier JS pour Tooltip (plugin tooltip) se trouve dans le dossier js à l'intérieur de votre dossier Bootstrap et est nommé bootstrap-tooltip.js. Le fichier JS pour Popover se trouve dans le dossier js à l'intérieur de votre dossier principal Bootstrap et est nommé bootstrap-popover.js. Jquery se trouve sous docs > assets > js dans votre dossier principal Bootstrap et est nommé jquery.js. Alternativement, vous pouvez visiter directement https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js pour télécharger Jquery.

Veuillez vous assurer de télécharger bootstrap-tooltip.js avant de télécharger bootstrap-popover.js. Le popover dépend du plugin tooltip, donc le plugin tooltip doit être chargé en premier.

Utilisation de Bootstrap Popover sur votre site web

Exemple

<div class="container">
<h2>Créer un Popover avec Bootstrap</h2>
    <div class="well">
        <a href="../index.html" id="example" class="btn btn-danger" rel="popover" data-content="C'est si simple de créer une infobulle pour mon site web !" data-original-title="Twitter Bootstrap Popover">survolez pour afficher le popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
    { $("#example").popover();
    });
</script>

Voir l'exemple en ligne

Explication

Le tableau ci-dessous explique le code ci-dessus. Il vous aidera à comprendre comment utiliser Bootstrap Popover.

Code Explication
id="example" Attribuez un id à l'ancre correspondante ; la valeur de l'id pointe vers le JavaScript qui implémentera le popover plus tard.
class="btn btn-danger" Créez un bouton. btn btn-danger est la classe utilisée dans l'exemple. Vous pouvez utiliser toute autre classe de Bootstrap CSS, ou utiliser votre propre classe personnalisée.
data-content="C'est si simple de créer une infobulle pour mon site web !" La valeur de data-content est affichée dans le corps du popover.
data-original-title="Bootstrap Popover" La valeur de data-original-title est affichée comme titre du popover.
survol pour popover Texte d'ancrage.
Référencez Jquery.
Référencez le fichier JS pour Bootstrap Tooltip (plugin d'info-bulle).
Référencez le fichier JS pour Bootstrap Popover.
$(function () Préparez le document. Commande Jquery.
$("#example").popover(); Accédez à l'id example et implémentez popover() dessus.

Ici, nous n'avons pas créé le popover en dehors de la boîte, sans aucune personnalisation, c'est-à-dire que nous n'avons utilisé aucune option via popover().

Utilisation

Ainsi, nous pouvons résumer l'utilisation de Bootstrap Popover comme suit :

$(function ()  
{ $("identifier").popover(options);  
});

Oùidentifierest un sélecteur Jquery utilisé pour identifier l'élément conteneur approprié. Ensuite, examinonsoptionsce qu'elles sont.

Options

Vous trouverez ci-dessous quelques options que vous pouvez utiliser avec popover() pour personnaliser l'apparence et le rendu du Popover.

animation

Le type de la valeur animation est booléen, avec une valeur par défaut de true. Il est utilisé pour donner à l'infobulle (plugin tooltip) un effet de transition dégradé CSS.

placement

La valeur placement peut être de type chaîne ou fonction, avec une valeur par défaut 'right'. top, bottom et left sont d'autres valeurs utilisables. Cette option est utilisée pour déterminer la position du Popover (popover) autour du texte d'ancrage. Voici un exemple utilisant l'option placement.

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Exemple de placement de Bootstrap Popover</title>
    <meta name="description" content="Création d'une fenêtre modale avec Twitter Bootstrap">
    <link href="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style>
        a {
            margin-left : 400px;
        }
    </style>
</head>
<body>
<div class="container">
<h2>Créer un Popover en utilisant l'option de placement Bootstrap</h2>
    <div class="well">
<a href="../index.html" id="example" class="btn btn-success" rel="popover" data-content="Créer une infobulle pour mon site web est si simple!" data-original-title="Twitter Bootstrap Popover">Survoler le Popover</a>
    </div>
    <div class="well">
<a href="../index.html" id="example_left" class="btn btn-success" rel="popover" data-content="Créer une infobulle pour mon site web est si simple!" data-original-title="Twitter Bootstrap popover">Survoler pour afficher</a>
    </div>
    <div class="well">
<a href="../index.html" id="example_top" class="btn btn-success" rel="popover" data-content="Créer une infobulle pour mon site web est si simple!" data-original-title="Twitter Bootstrap popover">Survoler pour afficher</a>
    </div>
    <div class="well">
<a href="../index.html" id="example_bottom" class="btn btn-success" rel="popover" data-content="Créer un popover pour mon site web est si simple !" data-original-title="Popover Twitter Bootstrap">Popover au survol</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
    { $("#example").popover();
        $("#example_left").popover({placement:'left'});
        $("#example_top").popover({placement:'top'});
        $("#example_bottom").popover({placement:'bottom'});
    });
</script>
</body>
</html>

Voir l'exemple en ligne

selector

Le type de la valeur selector est string, avec une valeur par défaut false. En utilisant cette option, l'objet Tooltip peut être délégué à la cible donnée.

trigger

Le type de la valeur trigger peut être string, avec une valeur par défaut de 'hover'. focus et manual sont d'autres valeurs utilisables. Cette option est utilisée pour déterminer comment le tooltip (plugin tooltip) est déclenché. L'exemple suivant montre comment utiliser l'option focus pour déclencher le Popover (popover).

Exemple

<div class="container">
<h2>Utilisation de l'option trigger de Bootstrap pour créer un popover</h2>
    <div class="well">
<a href="../index.html" id="example" class="btn btn-success" rel="popover" data-content="Créer une infobulle pour mon site web est si simple!" data-original-title="Twitter Bootstrap Popover">Survoler le Popover</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
    { $("#example").popover({trigger: 'focus'});
    });
</script>

Voir l'exemple en ligne

title

Le type de la valeur title peut être string ou function, avec une valeur par défaut de ''. Autrement dit, la valeur de l'attribut title n'est pas affichée par défaut.

content

Le type de la valeur content peut être string ou function, avec une valeur par défaut de ''. Autrement dit, la valeur de l'attribut data-content n'est pas affichée par défaut. Voici un exemple utilisant les options title et data-content. Cet exemple montre également comment utiliser plusieurs options ensemble.

Exemple

<div class="container">
<h2>Le popover Bootstrap utilise les options title et content</h2>
    <div class="well">
<a href="../index.html" id="example" class="btn btn-success" rel="popover">Popover au survol</a>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js.html"></script>
<script src="../twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js.html"></script>
<script>
    $(function ()
{ $("#example").popover({title: 'Twitter Bootstrap Popover', content: "Créer un popover pour mon site web est si simple !"});
    });
</script>

Voir l'exemple en ligne

delay

Le type de la valeur `delay` peut être un `number` ou un `object`, avec une valeur par défaut de 0. Cela détermine le temps d'attente pour afficher et masquer le popover, en millisecondes. Si la valeur est définie sur un nombre, le temps d'attente s'applique à la fois à l'affichage et au masquage. Si la valeur est définie sur un objet, la structure est `delay: { show: 500, hide: 100}`, où 500 et 100 sont en millisecondes.

Modification du balisage et du style par défaut du popover

Le balisage par défaut de la fenêtre contextuelle Popover se trouve à la ligne 92 du fichier bootstrap-popover.js. Comme indiqué ci-dessous :

template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
            

Vous pouvez le modifier et mettre votre propre balisage.

Les styles par défaut de la fenêtre contextuelle Popover se trouvent aux lignes 3027 à 3118. Vous pouvez les modifier et mettre vos propres styles.

Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.

Autres extensions