Explication détaillée de la boîte de dialogue d'information dans Bootstrap-Tutoriel d'amorçage-php.cn

Explication détaillée de la boîte de dialogue d'information dans Bootstrap

青灯夜游

Libérer： 2021-04-14 19:47:53

avant

2953 Les gens l'ont consulté

Cet article vous donnera une introduction détaillée à la boîte de dialogue d'information dans Bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Explication détaillée de la boîte de dialogue d'information dans Bootstrap

La boîte d'invite est une fonction relativement courante. De manière générale, lorsque la souris se déplace sur un élément spécifique, des invites pertinentes sont affichées. [Recommandations associées : "Tutoriel bootstrap"]

Utilisation de base

La boîte d'invite du framework Bootstrap a une structure très simple et est souvent utilisé. Créez une balise de bouton ou une balise de lien Que vous utilisiez des boutons ou des liens pour créer des boîtes d'invite, ils doivent tous remplir les conditions suivantes :

1. Définissez les informations d'invite via la valeur de l'attribut title (vous pouvez également utiliser l'attribut personnalisé src-title). pour définir les informations d'invite), l'attribut title a une priorité élevée

2. Utilisez l'attribut personnalisé de placement de données pour contrôler la position de la boîte d'informations d'invite. Selon quatre positions différentes, le placement de données en a quatre. valeurs : haut, droite, bas et gauche, indiquant respectivement que la boîte d'invite apparaît en haut, à droite, en bas et à gauche

3. Il y a aussi le paramètre le plus important qui est indispensable, data-toggle=". tooltip"

【Méthode de déclenchement】

La méthode de déclenchement de la boîte d'invite dans le framework Bootstrap est légèrement différente du plug-in introduit précédemment. Il ne peut pas être déclenché directement via les données d'attribut personnalisé. Doit s'appuyer sur du code JavaScript pour déclencher

La méthode de déclenchement la plus simple est la suivante :

$(function(){
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip();
});

Copier après la connexion

rrree

Explication détaillée de la boîte de dialogue dinformation dans Bootstrap

Paramètres d'attribut

Le composant de boîte d'invite fournit 7 paramètres d'attribut personnalisés pour définir la boîte d'invite






<script>
$(function(){
    $(&amp;#39;[data-toggle=&quot;tooltip&quot;]&amp;#39;).tooltip();
});    
</script>

Copier après la connexion

Explication détaillée de la boîte de dialogue dinformation dans Bootstrap

Déclencheur JS

En plus de la méthode de déclenchement la plus simple mentionnée ci-dessus, vous pouvez également spécifier un élément séparément, appeler le composant Tooltip sur l'élément et fournir divers paramètres personnalisés sous forme de javascript. Il n'est pas nécessaire d'utiliser les attributs personnalisés de l'élément. commençant par data-








<script>
$(function(){
    $(&amp;#39;[data-toggle=&quot;tooltip&quot;]&amp;#39;).tooltip();
});    
</script>

Copier après la connexion

$(element).tooltip(options);

Copier après la connexion

Explication détaillée de la boîte de dialogue dinformation dans Bootstrap

[Keyword]

En plus d'utiliser le objet d'options, vous pouvez également utiliser des mots-clés, 'show', 'hide', 'toggle', 'destroy'

<button type="button" class="btn btn-default" data-toggle="tooltip" >按钮</button>
<script>
$(function(){
    $(&#39;[data-toggle="tooltip"]&#39;).tooltip({
        title:"我是提示语",
        placement:&#39;right&#39;
    });
});    
</script>

Copier après la connexion

Explication détaillée de la boîte de dialogue dinformation dans Bootstrap

[Événement]

Ce plug-in prend en charge 5 types d'abonnements à des événements

<body   style="max-width:90%">
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息" id="btn1">按钮1</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn2">按钮2</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn3">按钮3</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" title="提示信息"  id="btn4">按钮4</button>
<script>
$(function(){
    $(&#39;#btn1&#39;).tooltip(&#39;show&#39;);//显示提示语
    $(&#39;#btn2&#39;).tooltip(&#39;hide&#39;);//关闭提示语
    $(&#39;#btn3&#39;).tooltip(&#39;toggle&#39;);//反转提示语
    $(&#39;#btn4&#39;).tooltip(&#39;destroy&#39;);//隐藏并销毁提示语
});    
</script>
</body>

Copier après la connexion

rrree

Explication détaillée de la boîte de dialogue dinformation dans Bootstrap