tooltip(title美化)教程——jquery的特效
要感谢大神独狼提供的一串代码,还有清风的css
一直在寻找美化title的方法,百度有许多,不过对我们这些小白来说很难。
首先复制下面代码到网站底部:
然后添加网站css即可,样式自己修改即可,如下:
<script>jQuery(document).ready(function($) {
var sweetTitles = {
x: 10,
y: 20,
tipElements: "a,span,img,div ",
noTitle: false,
init: function() {
var noTitle = this.noTitle;
$(this.tipElements).each(function() {
$(this).mouseover(function(e) {
if (noTitle) {
isTitle = true;
} else {
isTitle = $.trim(this.title) != '';
}
if (isTitle) {
this.myTitle = this.title;
this.title = "";
var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>" + this.myTitle + "</div></div>";
$('body').append(tooltip);
$('.tooltip').css({
"top": (e.pageY + 20) + "px",
"left": (e.pageX - 20) + "px"
}).show('fast');
}
}).mouseout(function() {
if (this.myTitle != null) {
this.title = this.myTitle;
$('.tooltip').remove();
}
}).mousemove(function(e) {
$('.tooltip').css({
"top": (e.pageY + 20) + "px",
"left": (e.pageX - 20) + "px"
});
});
});
}
};
$(function() {
sweetTitles.init();
});
});</script>
.tooltip {
font-size: 12px;
font-family: \5b8b\4f53;
line-height: 1.5;
position: absolute;
padding: 5px;
z-index: 100003;
opacity: .8
}
.tipsy-arrow {
position: absolute;
width: 0;
height: 0;
line-height: 0;
border: 6px dashed #FFA500;
top: 0;
left: 20%;
margin-left: -5px;
border-bottom-style: solid;
border-top: 0;
border-left-color: transparent;
border-right-color: transparent
}
.tipsy-arrow-n {
border-bottom-color: #FFA500;
}
.tipsy-inner {
background-color: #FFA500;
color: #fff;
max-width: 200px;
padding: 5px 8px 4px 8px;
text-align: center;
border-radius: 3px
}
发表评论