用简单的jquery+css创建自定义的a标签title提示，用来代替浏览器默认行为。如图：
javascript代码
代码如下:
登录后复制
$(function() { $("a[title]").each(function() { var a = $(this); var title = a.attr('title'); if (title == undefined || title == "") return; a.data('title', title) .removeAttr('title') .hover( function () { var offset = a.offset(); $("").appendTo($("body")).html(title).css({ top: offset.top + a.outerHeight() + 10, left: offset.left + a.outerWidth() + 1 }).fadeIn(function () { var pop = $(this); setTimeout(function () { pop.remove(); }, pop.text().length*80); }); }, function() { $("#anchortitlecontainer").remove(); } ); }); });
登录后复制
别忘记引用JQuery。
代码中setTimeout(function () { pop.remove(); }, pop.text().length*80);是根据title长度计算提示时间，用来防止太短的title提示过长或太长的title提示过短。
CSS代码
代码如下:
#anchortitlecontainer { position: absolute; z-index: 5999; border: solid 1px #315B6C; padding: 5px; color: #315B6C; background: none repeat scroll 0 0 #FFFFFF; border-radius: 5px; display: none; } #anchortitlecontainer:before { position: absolute; bottom: auto; left: -1px; top: -15px; border-color: transparent transparent transparent #315B6C; border-style: solid; border-width: 15px; content: ""; display: block; width: 0; } #anchortitlecontainer:after { position: absolute; bottom: auto; left: 0px; top: -13px; border-color: transparent transparent transparent #FFFFFF; border-style: solid; border-width: 15px; content: ""; display: block; width: 0; }
登录后复制
使用一些CSS3的特性，回避使用图片。
不是CSS高手，调出这个样式着实花了一些时间，如果有人能用上，那就是我的荣幸了。：）
立即学习“前端免费学习笔记（深入）”；
更多jquery+CSS创建自定义的a标签title提示tooltip示例相关文章请关注PHP中文网！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2835652.html
