工具提示

工具提示外掛是指當滑鼠移動到元素上時顯示提示訊息，也可以自定義顯示的方式。該外掛必須要寫

1、工具提示外掛的例項

<!-- 工具提示 -->
  <button class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左邊工具提示">左邊工具提示</button>
  <button class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上方工具提示">
 
上方工具提示</button>
  <button class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="下方工具提示">下方工具提示</button>
  <button class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右邊工具提示">右邊工具提示</button>
<!-- 該外掛必須要寫對應的js程式碼才生效 -->
  <
 
script>
    $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
  </script>

2、工具提示外掛的用法

1）第一步 在元素上加上對應的data屬性

data-toggle="tooltip" data-placement="left" title="左邊工具提示"

2）第二步 寫對應的js程式碼

  <script>
    $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  })
  </
 
script>

以上兩步全部完成，才可以生效。

3、工具提示外掛的引數/選項

• animation Boolean型別，預設true，動畫效果，預設是淡入淡出的效果。
• container String型別，預設false，新增指定tooltip到指定元素上（一般）
• delay Number型別，預設是0。表示延遲。
• html Boolean型別，預設是false。表示識別HTML標籤
• placement String型別，預設是'top'。表示工具提示的顯示方向（還有left right top bottom auto）
• selectorString型別，
• titleString型別，預設是‘’，表示工具提示的文字顯示
• triggerString型別，預設是hover，表示觸發工具提示的方式（包括click、hover、focus、manual）
• templateString型別，表示工具提示的模板，預設模板，也可以自定義template

<!-- 該外掛必須要寫對應的js程式碼才生效 -->
  <script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip({
        animation:false,  //動畫效果
        //delay:2000,     //顯示和隱藏的延遲時間一樣，都是延遲2000毫秒
        delay:{   //顯示和隱藏的延遲時間不一樣
          show:2000,  //延遲2000毫秒顯示
          hide:1000   //延遲1000毫秒隱藏
        },
        html:true,   //表示是否開啟html識別
        placement:'top',    //工具提示的顯示方向
        title:'訊息的預設值',  //工具提示的預設值
        trigger:'click',  //觸發工具提示的方式 
        template:'<div class="tooltip tooltipMsg">歡迎來到王者榮耀</div>' //自定義工具提示的模板
      });
    });
  </script>

...

    <style>
      body{
        padding: 100px;
      }
      /*自定義工具提示的樣式*/
      .tooltipMsg{  
        width: 150px;
        line-height: 30px;
        border-radius: 5px;
        color: white;
        background-color: rgba(255, 0, 0, 0.8);
        text-align: center;
      }
    </style>

4、工具提示外掛的方法