William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

css+javascript: a showtip effect.

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 <a> tag.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Showtip</title>
  6. <style type="text/css">
  7. .tooltip {
  8. display: none;
  9. position: absolute;
  10. z-index: 1000;
  11. width: 130px;
  12. background: #FFFACD;
  13. border: 2px double #2E8B57;
  14. text-align: left;
  15. padding: 5px;
  16. min-height: 1em;
  17. -moz-border-radius: 5px;
  18. }
  19. </style>
  20. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js">
  21. </script>
  22. <script language="javascript" type="text/javascript">
  23. function showtip(e,message) {
  24. var x=0, y=0, m, h;
  25. var t = message;
  26. if(!e) var e=window.event;
  27. if(e.pageX||e.pageY) { x=e.pageX;y=e.pageY; }
  28. else if(e.clientX||e.clientY)
  29. x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
  30. m = $('tipmsg');
  31. if((y>10)&&(y<450)) m.style.top=y-4+"px";
  32. else m.style.top=y+4+"px";
  33. var messageHeigth=(t.length/20)*10+25;
  34. if((e.clientY+messageHeigth)>510) m.style.top=y-messageHeigth+"px";
  35. if(x<850) m.style.left=x+20+"px";
  36. else m.style.left=x-170+"px";
  37. m.innerHTML=t;m.style.display="block";m.style.width="200px";m.style.zIndex=10;
  38. }
  39. function hidetip() {
  40. $('tipmsg').style.display="none";
  41. }
  42. </script>
  43. </head>
  44. <body>
  45. <div id="tipmsg" class="tooltip"></div>
  46. <a href="javascript:void(0);" onmouseover="showtip(event,'To display details when mouseover.');" onmouseout="hidetip();" style="text-decoration:underline;"> Click to show tip.</a>
  47. </body>
  48. </html>

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

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

Advertisements

One response to “css+javascript: a showtip effect.

  1. What is the Best Diet for YOU? 09/20/2011 at 12:21 am

    Helpful information. Lucky me I found your web site unintentionally, and I am stunned why this accident did not came about earlier! I bookmarked it.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: