JQuery - 實現Tooltip

時間 2019-11-15

標籤 jquery 實現 tooltip 欄目 JQuery 简体版

原文原文鏈接

想顯示元素的tooltip, 用jquery須要以下步驟。 javascript

1. 找到要顯示tooltip的目標 css

2. 定義tooltip消息和樣式。 html

3.顯示tooltip有三個函數showTooltips, hidetoops, changeTooltipsPosition. java

4.鼠標進入時showTooltips,初始化位置changeTooltipsPosition jquery

5.鼠標移動時要改變位置changeTooltipsPosition app

6.鼠標離開了要隱藏hideTooltips. ide

<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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。