简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

用简单的jquery+CSS创建自定义的a标签title提示tooltip

来源:易贤网   阅读:2114 次  日期:2014-10-10 13:47:50

温馨提示:易贤网小编为您整理了“用简单的jquery+CSS创建自定义的a标签title提示tooltip”,方便广大网友查阅!

简介

用简单的jquery+CSS创建自定义的a标签title提示,用来代替浏览器默认行为。如图:

名单

Javascript代码

代码如下:

</pre><pre name="code" class="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();

$("<div id=\"anchortitlecontainer\"></div>").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高手,调出这个样式着实花了一些时间,如果有人能用上,那就是我的荣幸了。:)

更多信息请查看IT技术专栏

更多信息请查看网页制作
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:disabled不可输入的值无法传递到action层
下一篇:html页面互相传值的问题解决方案
易贤网手机网站地址:用简单的jquery+CSS创建自定义的a标签title提示tooltip
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!