纯CSS鼠标提示工具tooltip.css
含有title属性的标签在鼠标移入时会显示title的文本,但是浏览器自带的效果不美观且显示慢,
所以做了一个纯CSS实现的提示工具:
地址:Github
示例:DEMO
安装:
只需在页面中引入"tooltip.css"文件即可。
如:
<link rel="stylesheet" href="css/tooltip.css" />
使用:
1、在需要显示提示的标签上添加tooltip属性和tips两个属性;
2、tooltip属性值代表方向,可以设置为“left”、“right”、“top”和“bottom”中的任意一个值;
3、tips属性存放提示文本。
如:
[quote]<p tooltip="left" tips="左边提示">左边提示</p>
<p tooltip="right" tips="右边提示">右边提示</p>
<p tooltip="top" tips="上边提示">上边提示</p>
<p tooltip="bottom" tips="下边提示">下边提示</p>[/quote]
在使用中遇到问题时,欢迎大家及时反馈。
评论 (13 )
最新评论
不可以拼接html,可以使用字符集,如换行符等
tips里可以放入拼接的html吗?
引入了的,在同一个页面,静态的可以用,动态的不行,我估计我这个元素初始化html没有,才出现这个问题的,谢谢你的答复。
在浏览器调试工具里,点击Network看下有没有成功请求到tooltip.css文件
你看下tooltip.css有没有正确引入
html 代码
这样加的,不能用
不好意思,看错了。
没有问题啊,动态添加可以的
要不你贴下代码
必须先在页面中创建HTML元素完成后,再使用这个插件省略文本
谢谢,我想问下,我动态拼接的HTML,加上怎么不起作用啊
加油 期待更新~
谢谢你的评论,后续版本会考虑将动画做好
有点晕的感觉... 哈 好想删除或是编辑回复
那个过渡 看着有点的感觉 orz...