css提示插件balloon的使用方法-創(chuàng)新互聯(lián)

這篇文章給大家介紹css提示插件balloon的使用方法，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

發(fā)展壯大離不開廣大客戶長期以來的信賴與支持，我們將始終秉承“誠信為本、服務(wù)至上”的服務(wù)理念，堅持“二合一”的優(yōu)良服務(wù)模式，真誠服務(wù)每家企業(yè)，認(rèn)真做好每個細節(jié)，不斷完善自我，成就企業(yè)，實現(xiàn)共贏。行業(yè)涉及成都公路鉆孔機等，在重慶網(wǎng)站建設(shè)公司、全網(wǎng)營銷推廣、WAP手機網(wǎng)站、VI設(shè)計、軟件開發(fā)等項目上具有豐富的設(shè)計經(jīng)驗。

balloon.css是一款實用純CSS3制作的簡單實用的tooltips工具提示效果庫。該tooltips通過簡單的設(shè)置可以實現(xiàn)在不同位置顯示提示框，根據(jù)內(nèi)容的多少來自動設(shè)置提示框的大小，它還可以顯示unicode編碼和FontAwesome字體圖標(biāo)等。

Balloon.css使用方法

實用該工具提示效果需要在頁面中引入balloon.css或balloon.min.css文件。

<linkrel="stylesheet"href="css/balloon.css">

tooltips的位置

可以通過data-balloon-pos屬性的設(shè)置來實現(xiàn)不同tooltips的位置的定位?？蛇x值有：up,down,left或right。

<buttondata-balloon="Whatsup!"data-balloon-pos="up">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="left">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="right">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="down">Hoverme!</button>

tooltips的長度

默認(rèn)情況下，tooltips總是會顯示在一行中，你可以通過data-balloon-length屬性來修改默認(rèn)的行為?？蛇x值有：small,medium,large或fit。

Balloon.css安裝

npminstallballoon-css

使用data-balloon-pos的屬性與所述值中的一個：up，down，left，right，up-left，up-right，down-left或down-right：

<buttondata-balloon="Whatsup!"data-balloon-pos="up">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="left">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="right">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="down">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="up-left">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="up-right">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="down-left">Hoverme!</button>

<buttondata-balloon="Whatsup!"data-balloon-pos="down-right">Hoverme!</button>

總之，Balloon.css純css3簡單實用的tooltips工具提示效果庫，Balloon.css可以讓你不用借助JavaScript給元素添加提示，而且只需要幾行css代碼。

關(guān)于css提示插件balloon的使用方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

文章標(biāo)題：css提示插件balloon的使用方法-創(chuàng)新互聯(lián)
本文地址：http://muchs.cn/article28/dgiocp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、外貿(mào)建站、品牌網(wǎng)站制作、網(wǎng)站改版、企業(yè)網(wǎng)站制作、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)