Bootstrap基本插件學習筆記之Tooltip提示工具(18)
提示工具(Tooltip)插件根據需求生成內容和標記,默認情況下是把提示工具(Tooltip)放在它們的觸發(fā)元素后面。
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>ToolTip提示工具</title> </head> <body> <div class="container"> <a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip">Tooptip</a> </div> <script> $(function () { // 啟動全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
提示工具(Tooltip)插件不像之前所討論的下拉菜單及其他插件那樣,它不是純 CSS 插件。如需使用該插件,您必須使用 JQuery 激活它(讀取 JavaScript)。使用下面的腳本來啟用頁面中的所有的提示工具(Tooltip):
$(function () { // 啟動全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); })
下面是一個實例:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="../../css/bootstrap.min.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="../../js/bootstrap.min.js"></script> <title>ToolTip提示工具實例</title> </head> <body> <div class="container"> <div class="page-header"> <h1>ToolTip提示工具實例</h1> </div> <div> <p>這是一個美麗的<a href="#" data-toggle="tooltip" title="右邊的姑娘" data-placement="right">姑娘</a></p> <p>這是一個美麗的<button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" title="左邊的姑娘" data-placement="left">姑娘</button></p> <p>這是一個美麗的<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="上邊的姑娘" data-placement="top">姑娘</button></p> <p>這是一個美麗的<button type="button" class="btn btn-sm btn-success" data-toggle="tooltip" title="下邊的姑娘" data-placement="bottom">姑娘</button></p> </div> </div> <script> $(function () { // 啟動全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
效果如下:
如果大家還想深入學習,可以點擊這里進行學習,再為大家附3個精彩的專題:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
html的DOM中document對象anchors集合用法實例
這篇文章主要介紹了html的DOM中document對象anchors集合用法,實例分析了anchors集合的功能及使用技巧,需要的朋友可以參考下2015-01-01小程序獲取用戶信息的兩種方法詳解(getUserProfile和頭像昵稱填寫)
小程序獲取用戶信息這部分其實不難,但是,他有點麻煩,下面這篇文章主要給大家介紹了關于小程序獲取用戶信息的兩種方法,主要使用的是getUserProfile和頭像昵稱填寫這兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08借助JavaScript腳本判斷瀏覽器Flash Player信息的方法
做了一個小的Demo,在測試時發(fā)現經常報錯,對此總結了一下借助JavaScript腳本判斷瀏覽器Flash Player信息的方法,需要的朋友可以參考下2014-07-07ES6 Iterator接口和for...of循環(huán)用法分析
這篇文章主要介紹了ES6 Iterator接口和for...of循環(huán)用法,結合實例形式分析了Iterator接口和for...of循環(huán)相關使用技巧,需要的朋友可以參考下2019-07-07Javascript 計算字符串在localStorage中所占字節(jié)數
本文給大家分享的是使用Javascript 計算字符串在localStorage中所占字節(jié)數,分別對UTF-8和UTF-16兩種編碼進行了詳細說明,有需要的小伙伴可以參考下。2015-10-10