Bootstrap 工具提示

• 

  定义和使用

  工具提示组件是一个小的弹出框，当用户将鼠标指针移到某个元素上时出现。

  要创建工具提示，请将 data-toggle="tooltip" 属性添加到元素。

  使用 title 属性来指定应该在工具提示中显示的文本：

  <a href="#" data-toggle="tooltip" title="Hello World!">鼠标经过我</a>
  

  注意：工具提示必须使用jQuery初始化：选择指定的元素并调用 tooltip() 方法。

  以下代码将启用文档中的所有工具提示：

  <div class="container">
    <a href="#" data-toggle="tooltip" title="Hello World!">鼠标经过我</a>
  </div>
  <script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
  </script>
  

  尝试一下

  输出结果如下：

  鼠标经过我
• 

  定位工具提示

  默认情况下，工具提示将显示在元素顶部。

  使用 data-placement 属性设置工具提示在元素的顶部，底部，左侧或右侧的位置：

  <div class="container">
    <a href="#" data-toggle="tooltip" data-placement="top" title="Hello World!">顶部</a>
    <a href="#" data-toggle="tooltip" data-placement="bottom" title="Hello World!">底部</a>
    <a href="#" data-toggle="tooltip" data-placement="left" title="Hello World!">左侧</a>
    <a href="#" data-toggle="tooltip" data-placement="right" title="Hello World!">右侧</a>
  </div>
  <script>
  $(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();   
  });
  </script>
  

  尝试一下

  输出结果如下：

  顶部 底部 左侧 右侧
• 

  相关页面

  CSS 工具提示

  Bootstrap 工具提示参数