ToolTips JQEURY插件之简洁小提示框效果
更新时间：2011年11月19日 17:25:45 作者：
本来不想写成ＪＱ的插件的，不过貌似不用ＪＱ的话，引用起来没有这么方便。以前也写过一些小小的ＪＳ方法，但是写ＪＱ插件是第一次
本来是想用一些现成的插件的，找了几个都比较复杂，我就想实现一个小小的效果，并不需要太复杂，所以最终打算自己写一个！
实现效果：鼠标放到文字上面，出现小提示框！
效果截图：
(function($){
$.fn.JNToolTips=function(){
var div = document.createElement("div");
div.style.cssText = 'width:300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute'
div.onclick=function(){$(div).remove();};
$(this).mouseover(function(e){
if(!e){e=window.event;}
div.innerHTML= $(this).attr("title");
$(this).attr("title","");
var doc = document.documentElement ? document.documentElement : document.body;
div.style.left=(e.clientX+doc.scrollLeft + 5)+"px";
div.style.top=(e.clientY+doc.scrollTop + 5)+"px";
document.body.appendChild(div);
}).mouseout(function(){
$(this).attr("title",div.innerHTML);
$(div).remove();
});
}
})(jQuery);
使用方法：
$(document).ready(function(){
$("a").JNToolTips();
});
实现效果：鼠标放到文字上面，出现小提示框！
效果截图：
测试结果：火狐，ＩＥ６/７/８下面通过
说明，没有做参数定制，以后可能会完善，大家要改显示效果的话，直接调整ＪＳ里面的ＣＳＳ样式即可！欢迎高手指教！
代码
复制代码 代码如下:
(function($){
$.fn.JNToolTips=function(){
var div = document.createElement("div");
div.style.cssText = 'width:300px; line-height:25px; border:solid 1px #F3A007; background-color:#FBE6BD; padding:5px 10px; font-size:12px;position:absolute'
div.onclick=function(){$(div).remove();};
$(this).mouseover(function(e){
if(!e){e=window.event;}
div.innerHTML= $(this).attr("title");
$(this).attr("title","");
var doc = document.documentElement ? document.documentElement : document.body;
div.style.left=(e.clientX+doc.scrollLeft + 5)+"px";
div.style.top=(e.clientY+doc.scrollTop + 5)+"px";
document.body.appendChild(div);
}).mouseout(function(){
$(this).attr("title",div.innerHTML);
$(div).remove();
});
}
})(jQuery);
使用方法：
复制代码 代码如下:
$(document).ready(function(){
$("a").JNToolTips();
});
相关文章
工具提示（Tooltip）在网站中的一个小功能，但却有很重要的作用，常用于显示一些温馨的提示信息。如果网站中的工具提示功能做得非常有创意的话能够加深用户对网站印象2012-07-07
网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。2009-12-12
这篇文章主要为大家详细介绍了Jquery Easyui菜单组件Menu的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
用jquery为ul下的li依次设置样式的代码，主要是利用了first,next方法。2011-03-03
有了JQuery对JS的整合和封装，它让页面操作更加的随心所欲，所以只有遵循良好的规范才会让代码更高效，更健壮。以下是我对如何高效操作JQuery的一些拙见，望指正！2014-04-04
最近看完了添加事件和删除事件的核心方法，忍不住想把jQuery的事件模块抠出来。jQuery的代码是非常内聚的，一环套一环。想独立出来不容易。2011-08-08
这篇文章主要为大家详细介绍了jquery单击文字或图片内容放大并居中显示，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
jQuery DataTables插件自定义Ajax分页实例解析
这篇文章主要为大家详细介绍了jQuery DataTables插件自定义Ajax分页的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
这篇文章介绍了jquery实现文字由下到上循环滚动的实例代码，有需要的朋友可以参考一下2013-08-08
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
下面小编就为大家分享一篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
最新评论