纯CSS添加Tooltip

纯CSS添加Tooltip

网站的Tooltip是指在用户指向控件时显示相应的文本,在网站上添加Tooltip提示信息是非常有用的。例如,可以描述网站的链接所指对象的页面的信息,为按钮添加Tooltip可以解释按钮的作用等。Tooltip不但可以节省网页空间,同时为网站阅读者提供提示信息。如果你使用的是WordPress,那么这个功能可以使用插件实现,例如 Simple Tooltip 以及Magic Tooltips等,也可以不依赖Js,用简单的几行代码来实现,我更喜欢代码来实现:

HTML结构

首先来看看HTML结构,结构非常简单。

CSS

将下面的CSS添加到style.css中即可。

大功告成,你可以说访问https://jsfiddle.net/xw1gaa7c/学习更多关于Tooltip的知识。

  • 打赏
  • 评论 0
  • 分享
  • 点赞 2
转载请注明出处: 纯CSS添加Tooltip | 乐朦

欢迎评论