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>
    
    输出结果如下: