Bootstrap基本插件學(xué)習(xí)筆記之Tooltip提示工具(18)
提示工具(Tooltip)插件根據(jù)需求生成內(nèi)容和標(biāo)記,默認(rèn)情況下是把提示工具(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 () { // 啟動(dòng)全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
提示工具(Tooltip)插件不像之前所討論的下拉菜單及其他插件那樣,它不是純 CSS 插件。如需使用該插件,您必須使用 JQuery 激活它(讀取 JavaScript)。使用下面的腳本來(lái)啟用頁(yè)面中的所有的提示工具(Tooltip):
$(function () { // 啟動(dòng)全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); })
下面是一個(gè)實(shí)例:
<!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提示工具實(shí)例</title> </head> <body> <div class="container"> <div class="page-header"> <h1>ToolTip提示工具實(shí)例</h1> </div> <div> <p>這是一個(gè)美麗的<a href="#" data-toggle="tooltip" title="右邊的姑娘" data-placement="right">姑娘</a></p> <p>這是一個(gè)美麗的<button type="button" class="btn btn-sm btn-primary" data-toggle="tooltip" title="左邊的姑娘" data-placement="left">姑娘</button></p> <p>這是一個(gè)美麗的<button type="button" class="btn btn-sm btn-danger" data-toggle="tooltip" title="上邊的姑娘" data-placement="top">姑娘</button></p> <p>這是一個(gè)美麗的<button type="button" class="btn btn-sm btn-success" data-toggle="tooltip" title="下邊的姑娘" data-placement="bottom">姑娘</button></p> </div> </div> <script> $(function () { // 啟動(dòng)全部的Tooltip工具 $('[data-toggle="tooltip"]').tooltip(); }) </script> </body> </html>
效果如下:
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專(zhuān)題:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
詳解用函數(shù)式編程對(duì)JavaScript進(jìn)行斷舍離
本篇文章主要介紹了用函數(shù)式編程對(duì)JavaScript進(jìn)行斷舍離,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09微信公眾號(hào)開(kāi)發(fā) 實(shí)現(xiàn)點(diǎn)擊返回按鈕就返回到聊天界面
本文分享了微信公眾號(hào)開(kāi)發(fā)實(shí)現(xiàn)點(diǎn)擊返回按鈕就返回到聊天界面的示例代碼。需要的朋友一起來(lái)看下吧2016-12-12js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能,制作能進(jìn)行加減乘除的計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10一個(gè)JavaScript遞歸實(shí)現(xiàn)反轉(zhuǎn)數(shù)組字符串的實(shí)例
這篇文章主要介紹了一個(gè)JavaScript遞歸實(shí)現(xiàn)反轉(zhuǎn)數(shù)組字符串的實(shí)例,很不錯(cuò),非常適合新手朋友們2014-10-10利用JavaScript實(shí)現(xiàn)3D可旋轉(zhuǎn)粒子矩陣效果
dat.gui.js是一個(gè)一個(gè)輕量級(jí)的圖形用戶(hù)界面庫(kù),或者說(shuō)GUI組件,只有幾十KB,可以用于創(chuàng)建操作控制三維場(chǎng)景的菜單欄等。本文將利用dat.gui.min.js實(shí)現(xiàn)3D可旋轉(zhuǎn)粒子矩陣效果,感興趣的可以了解一下2022-06-06html的DOM中document對(duì)象anchors集合用法實(shí)例
這篇文章主要介紹了html的DOM中document對(duì)象anchors集合用法,實(shí)例分析了anchors集合的功能及使用技巧,需要的朋友可以參考下2015-01-01小程序獲取用戶(hù)信息的兩種方法詳解(getUserProfile和頭像昵稱(chēng)填寫(xiě))
小程序獲取用戶(hù)信息這部分其實(shí)不難,但是,他有點(diǎn)麻煩,下面這篇文章主要給大家介紹了關(guān)于小程序獲取用戶(hù)信息的兩種方法,主要使用的是getUserProfile和頭像昵稱(chēng)填寫(xiě)這兩種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08借助JavaScript腳本判斷瀏覽器Flash Player信息的方法
做了一個(gè)小的Demo,在測(cè)試時(shí)發(fā)現(xiàn)經(jīng)常報(bào)錯(cuò),對(duì)此總結(jié)了一下借助JavaScript腳本判斷瀏覽器Flash Player信息的方法,需要的朋友可以參考下2014-07-07ES6 Iterator接口和for...of循環(huán)用法分析
這篇文章主要介紹了ES6 Iterator接口和for...of循環(huán)用法,結(jié)合實(shí)例形式分析了Iterator接口和for...of循環(huán)相關(guān)使用技巧,需要的朋友可以參考下2019-07-07Javascript 計(jì)算字符串在localStorage中所占字節(jié)數(shù)
本文給大家分享的是使用Javascript 計(jì)算字符串在localStorage中所占字節(jié)數(shù),分別對(duì)UTF-8和UTF-16兩種編碼進(jìn)行了詳細(xì)說(shuō)明,有需要的小伙伴可以參考下。2015-10-10