[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]

Any object, like this one, that has a "help=" attribute will get a hover balloon. Here's another one
They can include HTML markup of various sorts.
This one doesn't have any help.
This one has help. It works if you hit an internal span like this one, too.

The basic way this works:

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;
}