基于jQuery的Tooltip
近来，要开发一个关务管理系统，为了增加系统美观度，自己开发了一个基于jQuery框的的小插件，与大家分享一下，希望大家能给我提出宝贵修改意见。
下面开发说明使用方法和内容：
一、引用jQuery框架，可以到google上下载。
以下内容供没有接触过jQuery框架参考，jQuery是一个继property框架的一个轻量级的javascript框架，提高了javascript的开发效率和与浏览器的兼容性；想进一步了解jQuery可以到网上搜索一下。
二、引入Tooltip.js内容
;(function($){
showTip:function(settings)
{
$(this).each(function(){
//初始化配置信息
var options = jQuery.extend({
flagCss:"tip",
flagWidth:$(this).outerWidth(),
flagInfo:$(this).attr("title"),
isAnimate:false
},
settings);
if(!options.flagInfo)
{
return;
}
$(this).removeAttr("title");
$(this).focus(function(){
//设置提示信息最小宽度为163
options.flagWidth = (parseInt(options.flagWidth) < 100) ? 163 : parseInt(options.flagWidth);
var oTip = $("<div class='ui-slider-tooltip ui-corner-all'></div>");
var oPointer = $("<div class='ui-tooltip-pointer-down'><div class='ui-tooltip-pointer-down-inner'></div></div>");
var oTipInfo = $("<div>" + options.flagInfo + "</div>").attr("class",options.flagCss).css("width",options.flagWidth + "px");
//合并提示信息
var oToolTip = $(oTip).append(oTipInfo).append(oPointer);
//添加淡入效果
if(options.isAnimate)
{
$(oToolTip).fadeIn("slow");
}
$(this).after(oToolTip);
//计算提示信息的top、left和width
var position = $(this).position();
var oTipTop = eval(position.top - $(oTip).outerHeight() - 8);
var oTipLeft = position.left;
$(oToolTip).css("top" , oTipTop + "px").css("left" , oTipLeft + "px");
$(this).blur(function(){
$(oToolTip).remove();
});
});
});
return this;
}(jQuery);
三、Tooltip.css内容，此CSS内容是从网上下载
.ui-slider-tooltip{ /* CSS属性顺序按照 字母首字母 排列*/
background:#fdf9e5;
border:1px solid #fd7d2c;
color:#222222;
display: block;
text-align: left;
padding: 5px 3px 5px 3px;
position: absolute;
z-index:99999;
}
.ui-corner-all {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px 5px;
-webkit-border-top-right-radius:5px 5px;
-webkit-border-bottom-right-radius:5px 5px;
-webkit-border-bottom-left-radius:5px 5px;
}
.ui-tooltip-pointer-down {
border-bottom-width: 0;
border-left: 7px dashed transparent;
border-right: 7px dashed transparent;
border-top: 8px solid #fd7d2c;
bottom: -8px;
display: block;
height:0;
left: 18%;
margin-left: -7px;
position: absolute;
width:0;
}
.ui-tooltip-pointer-down-inner {
border-left: 6px dashed transparent;
border-right: 6px dashed transparent;
border-top: 7px solid #fff;
left: -6px;
top: -9px;
position: absolute;
}
.tip
{
font-size:9pt;
}
四、使用方法
<script type="text/javascript">
$(document).ready(function(){
$("#n").showTip();
});
</script>
五．运行效果
IE运行效果：
火狐运行效果：
六、附打包下载
