Tooltip with html content that appears right side, got working code but it's only for 1 tip, i would like it to be dynamic

Question

I found this fiddle for a tooltip that's perfect for my needs, but it's for only 1 tip. The application is as follows:

I have 25 records that I show on 1 page. When user hovers over a record it need to show data for that specific record and the tooltip should allow full html. The fiddle i found depends on a class but i can't get it to be dynamic.

This is the 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>

That fiddle bugs if the tooltip goes outside on it's right side. — Mandera, Sep 23 '14 at 12:08
try this it may help [http://stackoverflow.com/questions/23486648/jquery-ui-tooltip-with-dynamic-content] — Sonalkumar sute, Sep 23 '14 at 12:10

Mandera · Answer 1 · 2014-09-23T12:35:48.350

Alright I extracted my personal tooltip function, I think it works the way you want it.

To add a tooltip to an element you need to call createHoverFrame(element,tooltipHTML), then if you want to update a tooltip afterwards call updateHoverContent(element,tooltipHTML) on it.

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

I added an interval which updates the second tooltip just to display the updateHoverContent function.

P.S: The snap-to-edge-of-screen feature should work fine when the code isn't executed in a sandbox like it is here.

Tooltip with html content that appears right side, got working code but it's only for 1 tip, i would like it to be dynamic

1 Answers1