工作记录：jquery tooltip 提示

这是效果图;

tooltip.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;
}

tooltip.js:

;(function($){
    jQuery.fn.extend({
        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();
                    //});
                    $(this).mouseout(function(){//鼠标离开时触发
                   	  $(oToolTip).remove();
                    });
                });
            });
            return this;
        }
    })
})(jQuery);

此外还需要jquery库的支持