[NOTE FROM LATER: A couple of years after posting this, I've tried to fix the positioning of the balloon, and have failed. But I'm stuck on how to get the balloons positioned just below the text they're annotating, and have managed to make it substantially worse than before.] This is a test of a hovering help box. It isn't pretty and there are certainly better ways of doing it. Feel free to let me know: David Weinberger, [email protected]

The basic way this works:

• Mark the element you want to have popup help with an attribute called "help." The content of that attribute will be the content of the balloon. E.g. <p help="This is some <em> help</em>.">
• Declare those elements to be position:relative.
• Create the help balloons using the CSS styling you'd like, but make their position absolute. Use margin-top and margin-left to position them relative to the element they're explaining. Don't forget about negative margins.
• Change the mouseenter event for elements with the "help" attribute. Also the mouseleave event.

Here's the JavaScript. (No laughing!):

<script >
 $( document ).ready(function() {
 	//hovering over a results div will show the "help" attrib text
 	// also try mouseover and mouseleave - it changes whether it
 	// propagates to inner elements.
  var delayamt = 300; // set how long before the popup triggers. 1000 = one second
  $( "[help]" ).mouseenter( // any element with a "help" attribute will trigger when the mouse crosses into it
  function() {
  	var thisel = this;
  	setTimeoutConst = setTimeout(function(){ // this waits for the delayamt
  			$(".helpballoon").remove(); // remove any old balloons
             popupHelp(thisel); // go do the popup
         }, delayamt);
  }
  );
  
  // remove it when the mouse leaves
  $( "[help]" ).mouseleave(
  function() {
    $(".helpballoon" ).remove();
  }
  );
	  
   });
   
function popupHelp(e){
	// do the actual popup
	$(".helpballoon").remove(); // remove the old, just in case
	var balloon = document.createElement("div"); // create a new dib
	var txt = $(e).attr("help"); // get the text from the help attribute
	balloon.setAttribute("class","helpballoon"); // set the class
	balloon.setAttribute("id","helpballoon"); // create an id
	balloon.innerHTML=txt; // set the inner html of the balloon 
	var x = e.offsetTop + 80; // get mouse position, and lower it a bit
	var y = e.offsetLeft;
	// check if the balloon is running over the right margin
	var contwidth = $("#container").width(); 
	var balloonwidth =  $(balloon).width();
	if ( y > (contwidth - balloonwidth)){
		y =  $("#container").width();
	}
	$(balloon).css({"top" : x, "left" : y}); // set the position
	e.appendChild(balloon); // insert the new div into the target
}

</script>

Here's the CSS:

.helpballoon{
	border: 4px solid #39A7FF;
	background-color: #FDFFD7;
	position: absolute;
	font-size: 1em;
	margin-left: 350px;
	margin-top: -20px;
	box-shadow: 8px 8px 8px #909090;
	width: 200px;
	text-align: left;
	z-index: 10000;
	color: #2681CB;
	font-family: "Helvetica Neue", Helvetica,Verdana,Arial,sans_serif;
	border-radius: 10px;
	padding: 5px;
}