jquery 鼠标划过显示弹出层效果

最新推荐文章于 2021-02-04 09:43:29 发布

weixin_30646505

最新推荐文章于 2021-02-04 09:43:29 发布

阅读量257

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hellohongfu/archive/2011/11/11/2245492.html

本文详细介绍了如何使用JavaScript实现鼠标悬停事件触发的两种类型工具提示：移动事件工具提示和编辑事件工具提示。通过定义函数initMoveTooltip1和initEditTooltip，根据元素的位置动态调整工具提示的位置，并在鼠标移动时实时更新工具提示内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

核心方法：

function initMoveTooltip1(id, tp) {	
	var $element = typeof id === "string" 	? $("#" + id) : $(id);
	var $tp = $("#" + tp);
	var x = 10;
	var y = 20;
	var title = $element.find(".fc-event-title").text();
	$element.mouseover(function (e) {
		$("#eventMoveTooltipTitle").text(title);		
		$tp.show("fast");
		$tp.css({
					"top": (e.pageY + y) + "px",
					"left": (e.pageX + x) + "px"
				}).show();   //设置x坐标和y坐标，并且显示
	}).mouseout(function () {
		$tp.hide(); 
	}).mousemove(function (e) {
		$tp.css({
					"top": (e.pageY + y) + "px",
					"left": (e.pageX + x) + "px"
				});
	});
}

function initEditTooltip(id, tp, time) {
	var $element = $("#" + id);
	var $tp = $("#" + tp);	
	$element.mouseover(function (e) {
		$tp.show();
		var offset = $(this).offset();
		var y = $(this).height();		
		$tp.css({
					"top": (offset.top) + "px",
					"left": (offset.left) + "px"
				}).show("fast"); 
	})
}

转载于:https://www.cnblogs.com/hellohongfu/archive/2011/11/11/2245492.html