来个tooltip工具

web后台页面开发中，经常会遇到想显示一串字符而空间又不够的情况。
我想着用个hint组件（http://kushagragour.in/lab/hint/）应该就能解决问题吧，而实际用的时候发现与bootstrap不兼容。于是自己写了个。
github:https://github.com/koolfret/hint
鼠标在"hibernate"那行的效果:

2019.04.29 增加了一个在指定控件上增加tooltip,demo如下:

<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>	
	<script type="text/javascript">
		$(document).ready(function(){
			setHint("#readAbility",20,"提示按钮描述1,提示按钮描述2");
		});
		function setHint(targ,height,html){
			$(document).ready(function(){	
				if($("#ow_hint_parent").length==0){
					$("body").prepend("<div style=\"position:relative;display:none;\" id=\"ow_hint_parent\"><span id=\"ow_hint_info\" style=\"position: absolute;background-color: #f0c53a;padding:5px;border-radius: 2px;z-index:999999;\"></span></div>");
				}
				var jObj=$(targ);
				jObj.mouseenter(function(curObj){
					
					var x=$(curObj.target).offset().top;
					var y=$(curObj.target).offset().left;
					var owHintInfo=$("#ow_hint_info");
					owHintInfo.css("top",x+height);
					owHintInfo.css("left",y);					
					owHintInfo.html(html);
					$("#ow_hint_parent").show();
				});
				jObj.mouseleave(function(curObj){
					$("#ow_hint_parent").hide();
				});
			});
		}
	</script>	
</head>
<body>
<input type="button" onclick="" value="提示按钮" id="readAbility"/>
</body>
</html>

文/程忠浏览次数：0次 2017-03-15 14:31:14

来个tooltip工具

相关阅读