tooltip提示插件 | 易学教程

tooltip提示信息插件

原理：定位元素在页面中的位置即坐标信息，将显示节点元素插入到body中绝对应为到相应位置，显示内容从指定元素的属性(dataMess)中获取或者通过设置获取。

使用方法：

$("#test").iTooltip({"posType":"top"});

<div id="test" class="test" dataMess="测试数据中。。。<br/>测试数据中。。。">测试</div>

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>tooltip提示插件</title> <style>.iTooltipMes{ position: absolute; display: block; color: #000; font-size: 12px; padding: 10px; background: #fff; border: 1px solid #999; border-radius: 3px; box-shadow: 0px 1px 3px rgba(0,0,0,0.3); z-index: 999999; } .iToolTri{ position: absolute; z-index: 1; display: block; width: 0px; height: 0px; font-size: 0px; line-height: 0px; border: 8px solid #999999; } .iToolTri i{ position: absolute; z-index: 1; display: block; width: 0px; height: 0px; font-size: 0px; line-height: 0px; border: 6px solid #ffffff; } .iToolTriTop{ left: 50%; bottom: -16px; margin-left: -8px; border-color: #999999 transparent transparent transparent; border-style: solid dashed dashed dashed; } .iToolTriTop i{ left: -6px; bottom: -4px; border-color: #ffffff transparent transparent transparent; border-style: solid dashed dashed dashed; } .iToolTriBtm{ left: 50%; top: -16px; margin-left: -8px; border-color: transparent transparent #999999 transparent; border-style: dashed dashed solid dashed; } .iToolTriBtm i{ left: -6px; top: -4px; border-color: transparent transparent #ffffff transparent; border-style: dashed dashed solid dashed; } .iToolTriRt{ left: -16px; top: 50%; margin-top: -8px; border-color: transparent #999999 transparent transparent ; border-style: dashed solid dashed dashed ; } .iToolTriRt i{ left: -4px; top: -6px; border-color: transparent #ffffff transparent transparent; border-style: dashed solid dashed dashed; } .iToolTriLt{ right: -16px; top: 50%; margin-top: -8px; border-color: transparent transparent transparent #999999; border-style: dashed dashed dashed solid; } .iToolTriLt i{ right: -4px; top: -6px; border-color: transparent transparent transparent #ffffff; border-style: dashed dashed dashed solid; } .animated { -webkit-animation-duration: 0.3s; animation-duration: 0.3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.hinge { -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } </style> <script src="http://files.cnblogs.com/kuikui/jquery-1.10.2.min.js"></script> <style > *{margin: 0px;padding: 0px;} body{position: relative;height: 1500px; font-size: 14px; } .test{position: absolute; width: 100px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #f0f; cursor: pointer;} .left{ left: 10px; top: 10px;} .top{ left: 50%; top: 10px; margin-left: -50px;} .right{right: 10px; top: 10px;} .bottom{left: 50%; bottom: 10px; margin-left: -50px;} .center{left: 50%; top: 50%; margin-left: -50px; margin-top: -15px;} </style> </head> <body> <div id="left" class="test left" dataMess="测试数据中。。。<br/>测试数据中。。。">测试左</div> <div id="top" class="test top" dataMess="测试数据中。。。<br/>测试数据中。。。">测试上</div> <div id="right" class="test right" dataMess="测试数据中。。。<br/>测试数据中。。。">测试右</div> <div id="bottom" class="test bottom" dataMess="测试数据中。。。<br/>测试数据中。。。">测试下</div> <div id="center" class="test center" dataMess="http://www.cnblogs.com/kuikui<br/>测试数据中。。。">测试中</div> <script>(function($, window, document) { var pluginName = "iTooltip", defaults = { addClass: "", dataMess: "", posType: "top" // [left|top|right|bottom] }; function Plugin(element, options) { var options = $.extend({}, defaults, options); this.opts = options; this.$elem = element; this.elem = element.selector; this.anis = {top:"fadeInDown",right:"fadeInLeft",bottom:"fadeInUp",left:"fadeInRight"}; this.tris = {top:"iToolTriTop",right:"iToolTriRt",bottom:"iToolTriBtm",left:"iToolTriLt"}; this.isOk = true; this.tmpPosType = null; this.init(); }; Plugin.prototype = { init: function() { var _this = this; $(document).on("mouseover", _this.elem, function() { var $this = $(this); if (_this.isOk) { _this.isOk = false; _this.setShow($this); } }); $(document).on("mouseout", _this.elem, function() { if(!_this.isOk){ _this.isOk = true; _this.tmpPosType = _this.opts.posType; $(".iTooltipMes").remove(); } }); }, setShow: function(obj) { var _this = this; var l = obj.offset().left; var t = obj.offset().top; var w = obj.width(); var h = obj.height(); var mess = _this.opts.dataMess || obj.attr("dataMess"); var tmpHtml = "<div class='iTooltipMes animated'>" + mess + "<i class='iToolTri'><i></i></i></div>"; $("body").append(tmpHtml); var iTooltipMes = $(".iTooltipMes"); var ow = iTooltipMes.outerWidth(); var oh = iTooltipMes.outerHeight(); var tmpt = 0; var tmpl = 0; var distance = 10; var win = $(window); var winW = win.width(); var winH = win.height(); var winTop = win.scrollTop(); if( t < (h + distance + winTop) && _this.opts.posType ==="top"){ _this.tmpPosType = "bottom"; } if((l+w+ow > winW) && _this.opts.posType ==="right"){ _this.tmpPosType = "left"; } if((l< ow ) && _this.opts.posType ==="left"){ _this.tmpPosType = "right"; } if( ((t - winH + oh) > winTop) && _this.opts.posType ==="bottom"){ _this.tmpPosType = "top"; } _this.tmpPosType = _this.tmpPosType || _this.opts.posType; switch(_this.tmpPosType){ case "top": tmpt = t - oh - distance; tmpl = l + ((w-ow)/2); break; case "right": tmpt = t - ((oh-h)/2) ; tmpl = l + w + distance; break; case "bottom": tmpt = t + h + distance; tmpl = l + ((w-ow)/2); break; case "left": tmpt = t - ((oh-h)/2); tmpl = l - ow - distance; break; default: break; } if(!!_this.opts.addClass){ iTooltipMes.addClass(_this.opts.addClass); } iTooltipMes.addClass(_this.anis[_this.tmpPosType]).css({ left: tmpl + "px", top: tmpt + "px" }).find(".iToolTri").addClass(_this.tris[_this.tmpPosType]); } }; $.fn[pluginName] = function() { var args = arguments; if(!$(this).selector){ return; } $(this).data("iTooltip", new Plugin(this, args[0])); } })(jQuery, window, document);</script> <script type="text/javascript"> $("#left").iTooltip({ "posType":"right"}); $("#top").iTooltip({ "posType":"bottom"}); $("#right").iTooltip({ "posType":"left"}); $("#bottom").iTooltip({ "posType":"top"}); $("#center").iTooltip({ "posType":"top"}); </script> </body> </html>

来源：https://www.cnblogs.com/kuikui/p/3619764.html

标签

transform

border

webkit

animation