在国外的一个网站上看到了一份不错的jQuery 插件,主要是样式挺好的,于是转了过来方便以后需要是拿来用之....
预览一下:
文件主要文件及目录:
-
Images
folder contains the following images:
- – - tipTip.png
– created in Step 2
- – - tipMid.png
– created in Step 2
- – - tipBtm.png
– created in Step 2
-
style.css
– created in Step 3
-
jquery-1.3.1.min.js
– download this here
-
jquery.betterTooltip.js
– – created in Step 5
三个图片切片位置为:
由于是PNG格式,IE支持不是很好,载入的时候边框会黑一下,然后才会用图片填充(我刚用IE8 也是这样)
看了别人的回复后说有个 ie_pngfix 的东东,以后再研究一下...
如果实在不行,我不用PNG还不行....O(∩_∩)O哈哈~
CSS 主要文件如下:
.tip {
width: 212px;
padding-top: 37px;
display: none;
position: absolute;
background: transparent url(images/tipTop.png) no-repeat top;}
.tipMid {background: transparent url(images/tipMid.png) repeat-y; padding: 0 25px 20px 25px;}
.tipBtm {background: transparent url(images/tipBtm.png) no-repeat bottombottom; height: 32px;}
jQeury:
$.fn.betterTooltip = function(options){
/* Setup the options for the tooltip that can be
accessed from outside the plugin */
var defaults = {
speed: 200,
delay: 300
};
var options = $.extend(defaults, options);
/* Create a function that builds the tooltip
markup. Then, prepend the tooltip to the body */
getTip = function() {
var tTip =
"<div class='tip'>" +
"<div class='tipMid'>" +
"</div>" +
"<div class='tipBtm'></div>" +
"</div>";
return tTip;
}
$("body").prepend(getTip());
/* Give each item with the class associated with
the plugin the ability to call the tooltip */
$(this).each(function(){
var $this = $(this);
var tip = $('.tip');
var tipInner = $('.tip .tipMid');
var tTitle = (this.title);
this.title = "";
var offset = $(this).offset();
var tLeft = offset.left;
var tTop = offset.top;
var tWidth = $this.width();
var tHeight = $this.height();
/* Mouse over and out functions*/
$this.hover(function() {
tipInner.html(tTitle);
setTip(tTop, tLeft);
setTimer();
},
function() {
stopTimer();
tip.hide();
}
);
/* Delay the fade-in animation of the tooltip */
setTimer = function() {
$this.showTipTimer = setInterval("showTip()", defaults.delay);
}
stopTimer = function() {
clearInterval($this.showTipTimer);
}
/* Position the tooltip relative to the class
associated with the tooltip */
setTip = function(top, left){
var topOffset = tip.height();
var xTip = (left-30)+"px";
var yTip = (top-topOffset-60)+"px";
tip.css({'top' : yTip, 'left' : xTip});
}
/* This function stops the timer and creates the
fade-in animation */
showTip = function(){
stopTimer();
tip.animate({"top": "+=20px", "opacity": "toggle"}, defaults.speed);
}
});
};
示例代码:
<head>
<link href="theme/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.betterTooltip.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.tTip').betterTooltip({speed: 150, delay: 300});
});
</script>
</head>
<body>
<div class="tTip" title="The letter T. ">What's the difference between here and there?</div>
<a href="#" title="http://flynn.cnblogs.com">My Blog</a>
</body>
</html>
原文地址:http://net.tutsplus.com/tutorials/javascript-ajax/build-a-better-tooltip-with-jquery-awesomeness/comment-page-1/#comments
分享到:
相关推荐
jquery tooltip jquery tooltip jquery tooltip
jQuery实例_ ToolTip的实现
bettertip 一个可以自定义Tooltip的jQuery插件。基于jTip,但比它来得更加灵活
jquery tooltip 在表格中的使用 当鼠标移到表格中的不同图片上时, 显示不同的图片以及信息
jquery插件,tooltip提示文字。
不错的表单提示插件jquery-tooltip,jquery-tooltip jquery插件 表单提示工具
这是一款简单实用的jQuery tooltip插件。该tooltip插件提供很多参数让你可以控制tooltip的位置、大小、内容和动画等属性,并且还可以设置tooltip的倒计时消失效果,既简单有非常的实用。
jquery tooltip插件示例完美的页面效果
最好用的jquery的tooltip控件 绝对好用,不信你看一下效果,很漂亮的。。
jQuery图片tooltip提示是一款基于jquery css3实现的鼠标滑过缩略图tooltip提示显示大图特效。
jquery-tooltip 冒泡事件
jquery Tooltip简易文本提示框插件
ggtooltip.js是一款非常实用的基于bootstrap 3.X的jQuery tooltip提示插件。该bootstrap jQuery tooltip插件实用简单,支持在4个方向上像素tooltip信息,支持修改tooltip的背景色、前景色和边框颜色。
TourJS是一款tooltip风格高级jquery分步引导插件。TourJS通过在关键位置显示tooltip信息,来分步引导用户进行页面操作,功能非常实用。
jQuery Tooltip Plugin Demo
jQuery的一款tooltip提示插件,通过鼠标悬停显示提示时间,提示内容使用ajax动态显示。
JQuery-Tooltip-Plugin
Toolbar.js是一款非常实用的Tooltips样式的jQuery工具栏插件。该工具栏插件使用简单,可以和Font Awesome字体图标配合使用,并且可以制作非常酷的工具栏弹出动画效果。
一个为我修改过的,直接可以用,不需要复杂的修改,很简洁的提示。 另一个是完整的。
简单好用的tooltip插件。 $("[title]").tooltip();