css提示插件balloon的使用方法

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

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

　　Balloon.css使用方法

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

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

　　tooltips的位置

　　可以通過data-balloon-pos屬性的設置來實現不同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的長度

　　默認情況下，tooltips總是會顯示在一行中，你可以通過data-balloon-length屬性來修改默認的行為。可選值有：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代碼。

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