纯CSS鼠标提示工具tooltip.css

原创卓卓亭亭兮教程插件文档 1.8k阅读 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]左边提示
右边提示
上边提示
下边提示[/quote]

在使用中遇到问题时，欢迎大家及时反馈。

tooltip

26 13

评论 ( 13 )

最新评论

卓卓亭亭兮 12F 2018-01-18 10:47:35 13F

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

(0) 回复举报

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

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

(0) 查看回复 (1) 回复举报

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

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

(0) 回复举报

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

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

(0) 查看回复 (1) 回复举报

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

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

(0) 查看回复 (1) 回复举报

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

html 代码

for(var i=0;i<data.length;i++){
 if(data[0].id==data[i].id){//获取第一个数据
 if(data[i].spread != undefined && data[i].spread.length>0){
 if(data[i].spread != false){
 var leftUlHtml='<ul class="layui-nav layui-nav-tree">';
 for(var j=0;j<data[i].spread.length;j++){//获取二级菜单
 leftUlHtml+='<li class="layui-nav-item"><a href="javascript:;"> '+data[i].spread[j].title+'</a>';
 leftUlHtml+='<dl class="layui-nav-child">';
 if(data[i].spread[j].spread != undefined && data[i].spread[j].spread.length>0){
 if(data[i].spread[j].spread != false){
 for(var k=0;k<data[i].spread[j].spread.length;k++){
 leftUlHtml+='<dd>' +
 '<a href="javascript:;" data-url="'+data[i].spread[j].spread[k].url+'" data-id="'+data[i].spread[j].spread[k].id+'" tooltip="right" tips="'+data[i].spread[j].spread[k].title+'" >' +
 '' +
 '<cite> '+data[i].spread[j].spread[k].title+'</cite>' +
 '</a>' +
 '</dd>';
 }
 }
 leftUlHtml+='</dl>';
 }
 }
 }
 leftUlHtml += '</ul>';
 $(".js-left-menu").html(leftUlHtml);
 element.init();//初始化*/
 }
 }
 }

这样加的，不能用