含有 title 属性的标签在鼠标移入时会显示 title 的文本, 但是浏览器自带的效果不美观且显示慢,
所以做了一个纯 CSS 实现的提示工具:
地址: Github
示例: DEMO
安装:
只需在页面中引入 "tooltip.css" 文件即可
如:
<link rel="stylesheet" href="css/tooltip.css" />
使用:
1 在需要显示提示的标签上添加 tooltip 属性和 tips 两个属性;
2tooltip 属性值代表方向, 可以设置为 leftrighttop 和 bottom 中的任意一个值;
3tips 属性存放提示文本
如:
- [quote]<p tooltip="left" tips="左边提示"> 左边提示 </p>
- <p tooltip="right" tips="右边提示"> 右边提示 </p>
- <p tooltip="top" tips="上边提示"> 上边提示 </p>
- <p tooltip="bottom" tips="下边提示"> 下边提示 </p>[/quote]
在使用中遇到问题时, 欢迎大家及时反馈
来源: http://www.qdfuns.com/article/47066/2e27b7319ef855eec65da9a11ae32eeb.html