基于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运行效果：

火狐运行效果：

六、附打包下载