在国外的一个网站上看到了一份不错的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
分享到：
相关推荐
12. **Build a Better Tooltip with jQuery Awesomeness**：这个教程教你如何用jQuery编写一个插件，创建出比浏览器默认提示更吸引人的提示框。 13. **Simple Tooltip – jQuery & CSS**：Soh Tanaka的教程教你如何...
<a href="#" title="这是一个Tooltip提示信息">悬停我</a> ``` 接下来，我们需要引入jQuery库。在HTML文件中，我们通过`<script>`标签引入`jquery.js`，确保它在我们的脚本之前加载： ```html <script src="jquery...
`BetterTip`是一个专为jQuery设计的插件，它允许开发者自定义Tooltip的样式、内容和行为，使其更加灵活，能够适应各种复杂的网页布局和交互需求。与jTip相比，`BetterTip`提供了更多的定制选项和更优秀的性能。 **1...
jQuery Tooltip 是一个非常实用的插件，用于在用户将鼠标悬停在元素上时显示相关信息。在表格中使用 jQuery Tooltip 可以增强用户体验，让用户在不离开当前视图的情况下获取额外的数据或说明。本教程将深入讲解如何...
9. **Build a Better Tooltip with jQuery Awesomeness**：教程性质的插件，展示了如何利用jQuery构建更高级的Tooltip功能。 10. **BeautyTips**：这个插件专注于视觉效果，提供了多种皮肤和动画效果，使Tooltip看...
jQuery Tooltip 是一个非常实用的JavaScript库，用于在网页上创建提示框或气泡效果，它基于流行的jQuery框架。这个库提供了灵活的自定义选项，使得开发者可以轻松地为网页元素添加提示信息，增强用户交互体验。 ...
**jQuery Tooltip 提示框** 在Web开发中，提示框（Tooltip）是一种常见且实用的UI元素，用于向用户提供额外信息，通常在鼠标悬停时显示。jQuery是一个强大的JavaScript库，它简化了DOM操作，动画效果以及事件处理，...
jQuery Tooltip 插件是网页开发中常用的一种工具，它能够为网页元素添加提示信息，以增强用户体验。在网页设计中，Tooltip 常用于显示鼠标悬停在元素上时的额外信息，例如帮助文本、解释性注释或者链接预览等。...
jquery插件，tooltip提示文字。
《jQuery Tooltip：动态提示框的艺术与实践》 在网页设计中，提示框是不可或缺的元素，它能够为用户提供额外的信息，提升用户体验。"jQuery Tooltip"就是这样一个强大的工具，它能够帮助我们创建动态、美观且人性化...
jQuery Tooltip 是一个非常实用的JavaScript库，用于在网页上创建具有动态效果的提示框。这个插件基于流行的jQuery框架，可以轻松地为任何元素添加提示功能，为用户提供更丰富的交互体验。下面将详细介绍jQuery ...
jQuery插件：Tooltip详解 在Web开发中，Tooltip是一种常见的交互元素，用于向用户提供额外的信息，通常是当鼠标悬停在某个元素上时显示。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作，事件处理和动画等...
Toolbar.js是基于jQuery的一个工具栏插件，它专为创建具有Tooltip样式的功能丰富的工具栏而设计。这个插件的主要特点是其简洁的外观和灵活的自定义选项，使得开发者能够在网页中轻松集成各种功能。 1. **Tooltips...
jQuery ToolTip插件是一种在网页交互中常用的辅助功能，它能为页面元素提供额外的信息提示。这个插件基于流行的JavaScript库jQuery，使得在网页上创建动态、可自定义的提示框变得极其简单。通过给HTML元素添加`title...
本文将详细探讨“jquery-calendar-with-tooltip_9月显示有误修复后”这个主题，它涉及到jQuery插件的开发、JavaScript编程以及日历控件的常见问题与修复策略。 首先，"jquery-calendar-with-tooltip"这个名字暗示这...
不错的表单提示插件jquery-tooltip,jquery-tooltip jquery插件 表单提示工具
jQuery Tooltip 插件是网页开发中常用的一种增强用户体验的工具，它允许在用户鼠标悬停在元素上时显示额外的信息，通常称为“提示”。这款插件利用了jQuery库的高效性能和灵活性，使得创建和定制提示信息变得...
这是一款简单实用的jQuery tooltip插件。该tooltip插件提供很多参数让你可以控制tooltip的位置、大小、内容和动画等属性，并且还可以设置tooltip的倒计时消失效果，既简单有非常的实用。
jQuery图片tooltip提示是一种常见的网页交互效果，用于在用户将鼠标悬停在图片或链接上时显示额外信息。这种效果能够增强用户体验，特别是当图片作为预览缩略图时，可以提供一个快速查看全尺寸图片的方式。这个zip...