Here I wrote a simple html to implement a showtip effect by using css + javascript(prototype).
The steps:

• get prototype.js from google library instead of locally.
• define css class tooltip for the mouseover effect: keywords include position, z-index
• define javascript functions to process the mouseover/mouseout event by using prototype.js: carefully calculates the displayed box.
• set onmouseover and onmouseout event in html in tag.
• https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
• function showtip(e,message) {
• var x=0, y=0, m, h;
• var t = message;
• if(!e) var e=window.event;
• if(e.pageX||e.pageY) { x=e.pageX;y=e.pageY; }
• else if(e.clientX||e.clientY)
• x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
• m = $(‘tipmsg’);
• if((y>10)&&(y
• else m.style.top=y+4+“px”;
• var messageHeigth=(t.length/20)*10+25;
• if((e.clientY+messageHeigth)>510) m.style.top=y-messageHeigth+“px”;
• if(x
• else m.style.left=x-170+“px”;
• m.innerHTML=t;m.style.display=“block”;m.style.width=“200px”;m.style.zIndex=10;
• }
• function hidetip() {
• $(‘tipmsg’).style.display=“none”;
• }
• Click to show tip.

When mouse over the text, the showtip function is called and the effect is the following:

When mouse leaves the text, the hidetip() active to hide the pop text.
It works pretty good.