您的位置:首页 > Web前端 > JQuery

非常简单的气泡提示js(jquery)

2009-11-24 14:43 543 查看
首先引入 jquery.js,jquery.tooltip.v.1.1.js

//jquery.tooltip.v.1.1.js原文

/**

*

* simpleTooltip jQuery plugin, by Marius ILIE

* visit http://dev.mariusilie.net for details

*

**/

(function($){ $.fn.simpletooltip = function(){

return this.each(function() {

var text = $(this).attr("title");

$(this).attr("title", "");

if(text != undefined) {

$(this).hover(function(e){

var tipX = e.pageX + 12;

var tipY = e.pageY + 12;

$(this).attr("title", "");

$("body").append("<div id='simpleTooltip' style='position: absolute; z-index: 100; display: none;'>" + text + "</div>");

if($.browser.msie) var tipWidth = $("#simpleTooltip").outerWidth(true)

else var tipWidth = $("#simpleTooltip").width()

$("#simpleTooltip").width(tipWidth);

$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");

}, function(){

$("#simpleTooltip").remove();

$(this).attr("title", text);

});

$(this).mousemove(function(e){

var tipX = e.pageX + 12;

var tipY = e.pageY + 12;

var tipWidth = $("#simpleTooltip").outerWidth(true);

var tipHeight = $("#simpleTooltip").outerHeight(true);

if(tipX + tipWidth > $(window).scrollLeft() + $(window).width()) tipX = e.pageX - tipWidth;

if($(window).height()+$(window).scrollTop() < tipY + tipHeight) tipY = e.pageY - tipHeight;

$("#simpleTooltip").css("left", tipX).css("top", tipY).fadeIn("medium");

});

}

});

}})(jQuery);

用法:$("#some-element").simpletooltip();

如: <input type="text" class="inputtext" id="username" name="username" value="" maxlength="20" title="请输入5-20个字母、数字或下划线"/>

可以根据 id或class的元素来定义

$(".inputtext").simpletooltip(); 或$("#username").simpletooltip();

鼠标放上去会提示title里的文字
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: