javascript - 带有 html 内容的工具提示出现在右侧，有工作代码，但它仅适用于 1 个提示，我希望它是动态的

Question

我发现这个工具提示 fiddle 非常适合我的需求，但它仅适用于 1 个提示。申请如下:

我在一页上显示了 25 条记录。当用户将鼠标悬停在记录上时，它需要显示该特定记录的数据，并且工具提示应允许完整的 html。我发现的 fiddle 取决于一个类，但我无法让它成为动态的。

这是 fiddle : http://jsfiddle.net/jV2H9/302/

<div class="tip_trigger"><p><br />This is some text. This is some text. This is so</p></div>
<div class="tip">Show something</div>

Answer 1

好吧，我提取了我的个人工具提示功能，我认为它按照您想要的方式工作。

要将工具提示添加到元素，您需要调用 createHoverFrame(element,tooltipHTML)，然后如果您想随后更新工具提示，请调用 updateHoverContent(element,tooltipHTML)。

// Make a html element hoverable
function createHoverFrame(ele,hoverContent) {
	// Create content if hoverContent is defined
	if(hoverContent) updateHoverContent(ele,hoverContent);
	// Get the hover element
	var tHoverInfoFrame = document.getElementById("hoverInfoFrame");
	ele.onmouseover = function() {
		// See if hoverInfoContent var is set
		if(ele.hoverInfoContent) {
			tHoverInfoFrame.innerHTML = ele.hoverInfoContent;
		}
		else tHoverInfoFrame.innerHTML = "ERROR: this.hoverInfoContent is undefined";
        tHoverInfoFrame.style.display = "block";
		// Configure stuff
		tHoverInfoFrame.contentElement = ele;
	}
	ele.onmouseout = function() {
		tHoverInfoFrame.style.display = "";
		tHoverInfoFrame.contentElement = null;
	}
}
// Update an element's hover content (Update active hover frame's innerHTML if it got updated)
function updateHoverContent(ele,hoverContent) {
	// Get the hover element
	var tHoverInfoFrame = document.getElementById("hoverInfoFrame");
	// Update hover content on ele
	ele.hoverInfoContent = hoverContent;
	// Update hover content if it's visible
	if(tHoverInfoFrame.contentElement == ele) {
		document.getElementById("hoverInfoFrame").innerHTML = hoverContent;
	}
}



document.onmousemove = function(e) {
	var tFollowCursorDiv = document.getElementById("followCursorDiv");
	var tTop = e.pageY + 5 - document.body.scrollTop;
	var tLeft = e.pageX + 30 - document.body.scrollLeft;
	var tAddHeight = ((document.body.scrollWidth > (isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth)) ? 20 : 0);
	var tAddWidth = ((document.body.scrollHeight > (isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight)) ? 20 : 0);
	var tWindowHeight = (isNaN(window.innerHeight) ? window.clientHeight : window.innerHeight) - tAddHeight;
	var tWindowWidth = (isNaN(window.innerWidth) ? window.clientWidth : window.innerWidth) - tAddWidth;
	// Snap to edge of screen if outside
	if(tTop + tFollowCursorDiv.clientHeight > tWindowHeight) tTop = tWindowHeight - tFollowCursorDiv.clientHeight;
	if(tLeft + tFollowCursorDiv.clientWidth > tWindowWidth) tLeft = tWindowWidth - tFollowCursorDiv.clientWidth;
	tFollowCursorDiv.style.top = tTop + "px";
	tFollowCursorDiv.style.left = tLeft + "px";
}
var tHoverInfoFrame = document.getElementById("hoverInfoFrame");
tHoverInfoFrame.onmouseover = function() {
	tHoverInfoFrame.style.display = "block";
	tHoverInfoFrame.style.width = tHoverInfoFrame.clientWidth + "px";
}
tHoverInfoFrame.onmouseout = function() {
	tHoverInfoFrame.style.display = "";
	tHoverInfoFrame.style.width = "";
}

// ==================== You only need to modify these lines below here ====================

createHoverFrame(document.getElementById("tooltip"));
createHoverFrame(document.getElementById("tooltip2"),"test");



setInterval(function() {
    updateHoverContent(document.getElementById("tooltip"),Math.random());
},500);

#followCursorDiv {
	position: fixed;
	left: 200px;
	top: 100px;
}
#hoverInfoFrame {
	display: none;
	border: 1px solid black;
	background: rgba(200,200,200,0.9);
	padding: 10px;
	border-radius: 10px;
}

<span id = 'tooltip'>Hover me</span><br>
<span id = 'tooltip2'>And me</span>


<div id = "followCursorDiv"><span id = "hoverInfoFrame"></span></div>