Info-bulle d'amorçage

Bootstrap Plugin Tooltip

Tooltip est très utile lorsque vous souhaitez décrire un lien. Le plug-in Tooltip est inspiré de jQuery.tipsy écrit par Jason Frame. Le plug-in Tooltip a apporté de nombreuses améliorations. Par exemple, il n'a pas besoin de s'appuyer sur des images, mais utilise plutôt CSS pour obtenir des effets d'animation et utilise l'attribut data pour stocker les informations de titre.

Si vous souhaitez référencer les fonctionnalités du plugin individuellement, vous devez alors référencer tooltip.js. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou la version minifiée de bootstrap.min.js.

Utilisation

Les plug-ins Tooltip génèrent du contenu et du balisage en fonction des exigences. Par défaut, les info-bulles sont placées après leurs éléments déclencheurs. Vous pouvez ajouter des info-bulles des deux manières suivantes :

via l'attribut data : Pour ajouter une info-bulle, ajoutez simplement un Just add data-toggle= "tooltip" à la balise d'ancrage. Le titre de l'ancre est le texte de l'info-bulle. Par défaut, le plugin place l'info-bulle en haut.

<a href="#" data-toggle="tooltip" title="Exemple d'info-bulle">Veuillez survoler le mien</a> 🎜>

via JavaScript
: Déclenchez une info-bulle via JavaScript :

$( '#identifier').tooltip( options)

Le plug-in Tooltip n'est pas un pur plug-in CSS comme les menus déroulants et autres plug-ins évoqués précédemment. Pour utiliser le plugin, vous devez l'activer en utilisant jquery (lire javascript). Utilisez le script suivant pour activer toutes les info-bulles sur la page :

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

Exemple

L'exemple suivant montre l'utilisation du plug-in Tooltip via l'attribut data.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 提示工具（Tooltip）插件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" 
   title="默认的 Tooltip">
   默认的 Tooltip
</a>.
这是一个 <a href="#" class="tooltip-test" data-toggle="tooltip" 
   data-placement="left" title="左侧的 Tooltip">
   左侧的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="top" 
   title="顶部的 Tooltip">
   顶部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="bottom" 
   title="底部的 Tooltip">
   底部的 Tooltip
</a>.
这是一个 <a href="#" data-toggle="tooltip" data-placement="right" 
   title="右侧的 Tooltip">
   右侧的 Tooltip
</a>

<br>

<h4>提示工具（Tooltip）插件 - 按钮</h4>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   title="默认的 Tooltip">
   默认的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   data-placement="left" title="左侧的 Tooltip">
   左侧的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   data-placement="top" title="顶部的 Tooltip">
   顶部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   data-placement="bottom" title="底部的 Tooltip">
   底部的 Tooltip
</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" 
   data-placement="right" title="右侧的 Tooltip">
   右侧的 Tooltip
</button>
<script>
   $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>

</body>
</html>

Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Options

Certaines options sont ajoutées via l'API Bootstrap Data ou appelées via JavaScript. Les options sont répertoriées dans le tableau ci-dessous :

选项名称	类型/默认值	Data 属性名称	描述
animation	boolean 默认值：true	data-animation	提示工具使用 CSS 渐变滤镜效果。
html	boolean 默认值：false	data-html	向提示工具插入 HTML。如果为 false，jQuery 的 text 方法将被用于向 dom 插入内容。如果您担心 XSS 攻击，请使用 text。
placement	string\|function 默认值：top	data-placement	规定如何定位提示工具（即 top\|bottom\|left\|right\|auto）。当指定为 auto 时，会动态调整提示工具。例如，如果 placement 是 "auto left"，提示工具将会尽可能显示在左边，在情况不允许的情况下它才会显示在右边。
selector	string 默认值：false	data-selector	如果提供了一个选择器，提示工具对象将被委派到指定的目标。
title	string \| function 默认值：''	data-title	如果未指定 title 属性，则 title 选项是默认的 title 值。
trigger	string 默认值：'hover focus'	data-trigger	定义如何触发提示工具： click\| hover \| focus \| manual。您可以传递多个触发器，每个触发器之间用空格分隔。
content	string \| function 默认值：''	data-content	如果未指定 data-content 属性，则使用默认的 content 值。
delay	number \| object 默认值：0	data-delay	延迟显示和隐藏提示工具的毫秒数 - 对 manual 手动触发类型不适用。如果提供的是一个数字，那么延迟将会应用于显示和隐藏。如果提供的是对象，结构如下所示： delay: { show: 500, hide: 100 }
container	string \| false 默认值：false	data-container	向指定元素追加提示工具。实例： container: 'body'

Méthodes

Voici quelques méthodes utiles dans le plug-in Tooltip :

方法	描述	实例
Options: .tooltip(options)	向元素集合附加提示工具句柄。	$().tooltip(options)
Toggle: .tooltip('toggle')	切换显示/隐藏元素的提示工具。	$('#element').tooltip('toggle')
Show: .tooltip('show')	显示元素的提示工具。	$('#element').tooltip('show')
Hide: .tooltip('hide')	隐藏元素的提示工具。	$('#element').tooltip('hide')
Destroy: .tooltip('destroy')	隐藏并销毁元素的提示工具。	$('#element').tooltip('destroy')

Exemple

L'exemple suivant illustre l'utilisation de l'info-bulle du plug-in méthodes.

Instance

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 提示工具（Tooltip）插件方法</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<div style="padding: 100px 100px 10px;">
   这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" 
      title="show">Tooltip 方法 show
   </a>.

   这是一个 <a href="#" class="tooltip-hide" data-toggle="tooltip" 
      data-placement="left" title="hide">Tooltip 方法 hide
   </a>.

   这是一个 <a href="#" class="tooltip-destroy" data-toggle="tooltip" 
      data-placement="top" title="destroy">Tooltip 方法 destroy
   </a>.

   这是一个 <a href="#" class="tooltip-toggle" data-toggle="tooltip" 
      data-placement="bottom" title="toggle">Tooltip 方法 toggle
   </a>.
   <br><br><br><br><br><br>
   <p class="tooltip-options" >
      这是一个 <a href="#" data-toggle="tooltip" title="<h2>'am Header2
         </h2>">Tooltip 方法 options
      </a>.
   </p>

   <script>
      $(function () { $('.tooltip-show').tooltip('show');});
      $(function () { $('.tooltip-hide').tooltip('hide');});
      $(function () { $('.tooltip-destroy').tooltip('destroy');});
      $(function () { $('.tooltip-toggle').tooltip('toggle');});
      $(function () { $(".tooltip-options a").tooltip({html : true });
      });
   </script>
<div>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Événements

Le tableau suivant répertorie les événements utilisés dans le plug-in Tooltip. Ces événements peuvent être utilisés comme hooks dans les fonctions.

事件	描述	实例
show.bs.tooltip	当调用 show 实例方法时立即触发该事件。	$('#myTooltip').on('show.bs.tooltip', function () { // 执行一些动作... })
shown.bs.tooltip	当提示工具对用户可见时触发该事件（将等待 CSS 过渡效果完成）。	$('#myTooltip').on('shown.bs.tooltip', function () { // 执行一些动作... })
hide.bs.tooltip	当调用 hide 实例方法时立即触发该事件。	$('#myTooltip').on('hide.bs.tooltip', function () { // 执行一些动作... })
hidden.bs.tooltip	当提示工具对用户隐藏时触发该事件（将等待 CSS 过渡效果完成）。	$('#myTooltip').on('hidden.bs.tooltip', function () { // 执行一些动作... })

Exemple

L'exemple suivant montre l'utilisation de l'événement du plugin Tooltip

Exemple

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 实例 - 提示工具（Tooltip）插件事件</title>
   <link href="http://libs.baidu.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="http://libs.baidu.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>

<h4>提示工具（Tooltip）插件 - 锚</h4>
这是一个 <a href="#" class="tooltip-show" data-toggle="tooltip" 
   title="默认的 Tooltip">默认的 Tooltip
</a>.

<script>
$(function () { $('.tooltip-show').tooltip('show');});
$(function () { $('.tooltip-show').on('show.bs.tooltip', function () {
   alert("Alert message on show");
})});
</script>

</body>
</html>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

← Onglet Bootstrap

Boîte contextuelle d'amorçage →