纯CSS鼠标提示工具tooltip.css

原创 卓卓亭亭兮 教程 插件文档 1910阅读 2018-01-04 12:17:41 举报

纯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 )
最新评论
卓卓亭亭兮 12F 2018-01-18 10:47:35 13F

不可以拼接html,可以使用字符集,如换行符等

18323947911 2018-01-18 09:21:55 12F

tips里可以放入拼接的html吗?

452369055 10F 2018-01-16 09:55:38 11F

引入了的,在同一个页面,静态的可以用,动态的不行,我估计我这个元素初始化html没有,才出现这个问题的,谢谢你的答复。

卓卓亭亭兮 9F 2018-01-15 17:03:10 10F

在浏览器调试工具里,点击Network看下有没有成功请求到tooltip.css文件

卓卓亭亭兮 8F 2018-01-15 17:01:14 9F

你看下tooltip.css有没有正确引入

452369055 7F 2018-01-15 16:20:06 8F

html 代码

这样加的,不能用

卓卓亭亭兮 6F 2018-01-15 15:19:23 7F

不好意思,看错了。
没有问题啊,动态添加可以的
要不你贴下代码

卓卓亭亭兮 5F 2018-01-15 15:11:40 6F

必须先在页面中创建HTML元素完成后,再使用这个插件省略文本

452369055 2018-01-15 14:33:22 5F

谢谢,我想问下,我动态拼接的HTML,加上怎么不起作用啊

wangyuyu 3F 2018-01-10 14:13:39 4F

加油 期待更新~

卓卓亭亭兮 2F 2018-01-10 13:10:49 3F

谢谢你的评论,后续版本会考虑将动画做好

wangyuyu 1F 2018-01-10 11:29:08 2F

有点晕的感觉... 哈 好想删除或是编辑回复

wangyuyu 2018-01-10 11:28:06 1F

那个过渡 看着有点的感觉 orz...