帶有html內容的工具提示出現在右側，有工作代碼，但僅適用於1個提示，我希望它是動態的

Question

我發現此小提琴是一種非常適合我的需求的工具提示，但僅適用於1個提示。 該應用程序如下：

我有25條記錄顯示在1頁上。 當用戶將鼠標懸停在一條記錄上時，它需要顯示該特定記錄的數據，並且工具提示應允許使用完整的html。 我發現的小提琴取決於一堂課，但我無法使它變得動態。

這是小提琴： 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> 

我添加了一個間隔，該間隔更新了第二個工具提示，只是為了顯示updateHoverContent函數。

PS：當未在此處的沙盒中執行代碼時，屏幕邊緣對齊功能應該可以正常工作。