JQuery - 实现Tooltip

最新推荐文章于 2023-07-31 10:00:35 发布

weixin_33737134

最新推荐文章于 2023-07-31 10:00:35 发布

阅读量876

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/138995/blog/194154

版权

2019独角兽企业重金招聘Python工程师标准>>>

想显示元素的tooltip, 用jquery需要如下步骤。

1. 找到要显示tooltip的目标

2. 定义tooltip消息和样式。

3.显示tooltip有三个函数showTooltips, hidetoops, changeTooltipsPosition.

4.鼠标进入时showTooltips,初始化位置changeTooltipsPosition

5.鼠标移动时要改变位置changeTooltipsPosition

6.鼠标离开了要隐藏hideTooltips.

<html>
<head>
 
<script type="text/javascript" src="jquery-1.4.2.js"></script>
 
<style type="text/css">
	#hint{
		cursor:pointer;
	}
	.tooltip{
		margin:8px;
		padding:8px;
		border:1px solid blue;
		background-color:yellow;
		position: absolute;
		z-index: 2;
	}
</style>
 
</head>
 
<body>
 
<h1>jQuery tooltips example</h1>
 
<label id="username">Username : </label><input type="text" / size="50"> 
<span id="hint">hint (mouseover me)</span>
 
<script type="text/javascript">
 
$(document).ready(function() {
 
	var changeTooltipPosition = function(event) {
	  var tooltipX = event.pageX - 8;
	  var tooltipY = event.pageY + 8;
	  $('div.tooltip').css({top: tooltipY, left: tooltipX});
	};
 
	var showTooltip = function(event) {
	  $('div.tooltip').remove();
	  $('<div class="tooltip">I\' am tooltips! tooltips! tooltips! :)</div>')
            .appendTo('body');
	  changeTooltipPosition(event);
	};
 
	var hideTooltip = function() {
	   $('div.tooltip').remove();
	};
 
	$("span#hint,label#username").bind({
	   mousemove : changeTooltipPosition,
	   mouseenter : showTooltip,
	   mouseleave: hideTooltip
	});
});
 
</script>
 
</body>
</html>

转载于:https://my.oschina.net/u/138995/blog/194154