轻量级JS tooltip提示效果

    选择打赏方式

有时候我们需要给链接或文字增加tooltip提示条功能,实现Javascript动态文字或图片提示效果,以增强页面元素的友好度,如果你细心点的话可以看到现在很多网站都流行使用一些jQuery Tooltip来实现提示信息,这些简短的代码就能提高网站的用户体验,使用jQuery插件tooltip提示条工具,不仅可以实现文字和图片提示条功能,还可以动态加载其它页面文件,丰富tooltip提示条的内容,而且使用比较简单。

鼠标经过出现的提示效果,比如让title更漂亮

img.jpg

 

JS:

jQuery(document).ready(function($){ var sweetTitles = { x : 10, y : 20, tipElements : "a,span,img,div ", noTitle : false, init : function() { var noTitle = this.noTitle; $(this.tipElements).each(function(){ $(this).mouseover(function(e){ if(noTitle){ isTitle = true;
 }else{ isTitle = $.trim(this.title) != '';
 } if(isTitle){ this.myTitle = this.title; this.title = ""; var tooltip = "<div class='tooltip'><div class='tipsy-arrow tipsy-arrow-n'></div><div class='tipsy-inner'>"+this.myTitle+"</div></div>"; $('body').append(tooltip); $('.tooltip')
 .css({ "top" :( e.pageY+20)+"px", "left" :( e.pageX-20)+"px" }).show('fast');
 }
 }).mouseout(function(){ if(this.myTitle != null){ this.title = this.myTitle; $('.tooltip').remove();
 }
 }).mousemove(function(e){ $('.tooltip')
 .css({ "top" :( e.pageY+20)+"px", "left" :( e.pageX-20)+"px" });
 });
 });
 }
 }; $(function(){ sweetTitles.init();
 });	
});

CSS:

.tooltip {font-size: 10px;position: absolute;padding: 5px;z-index: 100000;opacity: 0.8;}
.tipsy-arrow {position: absolute;width: 0;height: 0;line-height: 0;border: 6px dashed #000;top: 0px;left: 20%;margin-left: -5px;border-bottom-style: solid;border-top: none;border-left-color: transparent;border-right-color: transparent;}
.tipsy-arrow-n {border-bottom-color: #000;}
.tipsy-inner {background-color: #000;color: #FFF;max-width: 200px;padding: 5px 8px 4px 8px;text-align: center;border-radius: 3px;}


版权声明:若无特殊注明,本文皆为《 迷糊小侠 》原创,转载请保留文章出处。
本文链接:轻量级JS tooltip提示效果 http://guzhengdong.cn/tooltip.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

嘻嘻 大笑 可怜 吃惊 害羞 调皮 鄙视 示爱 大哭 开心 偷笑 嘘 奸笑 委屈 抱抱 愤怒 思考 日了狗 胜利 不高兴 阴险 乖 酷 滑稽

评论信息框

吃奶的力气提交吐槽中...

已有10条吐槽

某人

2015-08-12 08:44 贵州省铜仁地区联通
表示没用
 Android 4.2.2   UC浏览器 10.6.0.620

笑忘书

2015-08-10 20:03 广东省湛江市电信
不错,用上了
 Windows 8.1 x64   UC浏览器 5.3.3774.0

迷糊小侠

2015-08-10 20:27 江苏省苏州市电信
@笑忘书:这是什么浏览器啊- -!
 Windows 10 x64   Google Chrome 44.0.2403.130

笑忘书

2015-08-10 20:28 广东省湛江市电信
@迷糊小侠:UC电脑版
 Windows 8.1 x64   UC浏览器 5.3.3774.0

迷糊小侠

2015-08-10 20:44 江苏省苏州市电信
@笑忘书:现在浏览器识别正常了- -!
 Windows 10 x64   QQBrowser 9.0.3011.400

瑞少

2015-05-07 21:01 广东省深圳市联通
对了,这怎么加呢
 Xiaomi HM-NOTE 1LTE   Android Webkit 4.0

迷糊小侠

2015-05-07 21:04 江苏省苏州市电信
@瑞少:JS  CSS都发出来了,写进模板就行了
 Windows 7 x64   Google Chrome 42.0.2311.135

迷糊小侠

2015-05-07 21:05 江苏省苏州市电信
@迷糊小侠:我弄这个是方便手机看浏览器和系统信息
 Windows 7 x64   Google Chrome 42.0.2311.135

起重机车轮

2015-04-02 09:38 河南省焦作市移动
学习了
 Windows 7   Google Chrome 38.0.2125.122

zhm.Me

2015-02-21 13:04 安徽省芜湖市电信
我们的相识又增加了一年!新年快乐!
 Windows 7 x64   Google Chrome 31.0.1650.63