jquery插件之tooltip

客户就是上帝，凡事客户说的都是对的，凡事客户提出的建议都是对的！

屌丝就是这样炼成的吧！~~~

很多时候，我们都想给用户一个好的体验，或者让用户有个好的交互！苦思冥想，把自己的成果和大家一起分享吧。。。。

IT人，开源嘛，希望能和大家一起共勉。。。。

我们在浏览Twitter或者新浪微博的时候，有时候都能见到一些友好的提示，现在我把自己的一些成果和大家分享出来，减少一些人走弯路吧！

效果图：

就是我们把鼠标移到输入框的时候能给我们一个友好的提示，实现的部分代码如下：

jsp页面中代码：

<tr>
	<td><input type="text" name="username" style="height: 40px;font-size: 16px;" placeholder="请输入用户名"
				id="name" title="姓名的全拼" />
	</td>
</tr>

<tr>
	<td><input type="password" name="password" style="height: 40px;font-size: 16px;" placeholder="请输入密码"
				id="pass" title="身份证后6位" />
	</td>
</tr>

javaScript代码：

$(document).ready(function() {
	//所有的Input同意添加tooltip
	//$("input").showTip();
	//  $("#name").showTip({flagInfo:"用户名是汉语拼音全拼"});
	$("#name").showTip({
		isAnimate : true
	});
	$("#pass").showTip({
		isAnimate : true
	});

});

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) ? 100 : 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><center>" + options.flagInfo + "</center></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);

CSS样式文件

.ui-slider-tooltip{	/* CSS属性顺序按照 字母首字母 排列*/
	background:#333333; 
	border:1px solid #333333;
	color:#ffffff;
	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;
     border-radius:5px;
}
.ui-tooltip-pointer-down {
	border-bottom-width: 0;
	border-left: 7px dashed transparent; 
	border-right: 7px dashed transparent;
	border-top: 8px solid #333333;
	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 #333333;
	left: -6px;
	top: -9px;
	position: absolute; 
}

.tip
{
    font-size:9pt;
}

大家有什么问题可以留言。。。。共勉