UIkit tooltip學習記錄

什么是tooltip?

就是工具提示。
舉個例子
如下箭頭所指就是個tooltip

image.png

如何實現?

利用uikit附加組件,需要引入uikit的tooltip.css以及tooltip.js才可以。(重要,因為tooltip的基礎組件不包含這個)

舉個例子

如下,添加data-uk-tooltip屬性即可,title屬性規定提示的內容。

<button class="uk-button" data-uk-tooltip title="this is a test">click</button>

如何設置提示的位置?

給data-uk-tooltip屬性設置值就可以。如下

<button class="uk-button" data-uk-tooltip="{pos:'right'}" title="this is a test">click</button>

結果可以看出是從右側彈出提示

image.png

工具提示 - UIkit 中文文檔

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容