轻量级 JS ToolTip提示效果有时候我们需要给链

轻量级 JS ToolTip提示效果有时候我们需要给链接或文字增加tooltip提示条功能，实现Javascript动态文字或图片提示效果，以增强页面元素的友好度，如果你细心点的话可以看到现在很多网站都流行使用一些jQuery Tooltip来实现提示信息，这些简短的代码就能提高网站的用户体验，使用jQuery插件tooltip提示条工具，不仅可以实现文字和图片提示条功能，还可以动态加载其它页面文件，丰富tooltip提示条的内容，而且使用比较简单。鼠标经过出现的提示效果，比如让title更漂亮 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;} 其实你也可以直接放入以下html代码： <script type="text/javascript"> 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 ; } ; } ; </script> <style> .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;} …

轻量级 JS ToolTip提示效果 有时候我们需要给链 - Assbbs

轻量级 JS ToolTip提示效果有时候我们需要给链 - Assbbs