Code Examples -> Cool tool tip

	Join us on FaceBook
	Submit Your Code
	Poker Tournaments
	Poker Guide for Developers
	SEO Monitor
	UpTime Monitor
	My Favorite Examples
	My Favorite Articles
	Update Your Profile

More Weber Sites
	PHP Code Search
	Web Development Forums
	Learn MySQL Playing Trivia
	PHPBB2 Templates
	Web Development Resources
	Web Development Content
	Internet Security Software

Recommended Links
	PHPClasses
	PHP Editor
	PHP Jobs
	Vision.To Design
	Ajax Tutorials
	PHP Programming Help
	PHP/MySQL Programming
	Webmaster Resources
	Webmaster Forum
	XML meta language
	website builder

Recommended
	פרייסז - הכח לקנות עובר לידיים שלך
	Texas Holdem Poker Evangelists


BACK		ADD A COMMENT		SEND TO A FRIEND		ADD TO MY FAVORITES		ADD CODE EXAMPLES		PRINT

PHP Code Examples

Title :	Cool tool tip
Categories :	Java Script, HTML, Web Design	Rupali Gulande
Date :	May 31st 2007
Grade :	3 of 5 (graded 3 times)
Viewed :	8179
File :	No file for this code example.
Images :	Image 1

Search :	More code by Rupali Gulande
Action :	Grade This Code Example
Tools :	My Examples List

Code

The code below will give an idea about how to add cool tool tips.

<html>
<head>
<style type="text/css">
div#helpbox
{
border: 2px solid #C9C299;
background: #FAF8CC; position: absolute;
display: none; font-size: smaller; padding: 2px;
}
</style>

<script type="text/javascript">

var helptexts = [

//helptextid4 - Interview Questions
'Interview Questions for OOPs, <br>PHP, And more...',

//helptextid5 - Articles
'<b>Simplest and Easiest</b> Articles for .Net'
];

function showbox(e) {
if (!e)
var e = window.event;
var linkID = e.srcElement? e.srcElement.id : this.id;
var helpbox = document.getElementById('helpbox');
helpbox.innerHTML = '<b>Click here...</b><br>' + helptexts[linkID.substr(10) - 1];
helpbox.style.display = 'block';

var posx = (typeof e.pageX!= 'undefined')? e.pageX : e.clientX + (document.documentElement? document.documentElement.scrollLeft
: document.body.scrollLeft);

var posy = (typeof e.pageY!= 'undefined')? e.pageY
: e.clientY + (document.documentElement? document.documentElement.scrollTop
: document.body.scrollTop);


helpbox.style.top = posy - 20 + 'px';
helpbox.style.left = posx + 10 + 'px';

}


function hidebox() {
document.getElementById('helpbox').style.display = 'none';
}


function init() {
var hrefs = document.getElementsByTagName('a');
for (var i = 0; i < hrefs.length; i++) {
if (hrefs[i].id.substr(0,10) == 'helptextid') {
if (hrefs[i].attachEvent)
{
hrefs[i].attachEvent('onmouseover', showbox);
hrefs[i].attachEvent('onmouseout', hidebox);
}
else if(hrefs[i].addEventListener)
{
hrefs[i].addEventListener('mouseover', showbox, false);
hrefs[i].addEventListener('mouseout', hidebox, false);
}
}
}
}
</script>

</head>
<body>
<table cellspacing=10>
<tr>
<td><a href="#" id="helptextid1">WeberDev</a></td>
</tr>
<tr>
<td><a href="http://www.techxcel.com" id="helptextid2">Articles</a></td>
</tr>
</table>

<div id="helpbox"></div>
<script type="text/javascript">
init();
</script>
</body>
</html>

Related Code Examples

	Apply Wave effect to Text using Javascript Categories : Java Script, HTML, Web Design
	CSS Container BOX , with cool CSS Design Categories : CSS, HTML, Web Design
	Table editable dynamic form with edit + selection (select / option) + checkbox. Categories : Java Script, DHTML, User Interface, CSS, HTML
	Javascript linked dropdowns Categories : Java Script, HTML, Classes and Objects
	Javascript animated menu items Categories : DHTML, CSS, Java Script, HTML
	How to create <SELECT> menues that change on the fly according to other <SELECT> menues on the page? Categories : Java Script, HTML
	Bouncing Marquee at Status Bar Categories : Java Script, HTML, Browsers
	Page Loading Message shown during the time your site's page is being loaded. Categories : HTML, CSS, Java Script
	Prevent Right Mouse steal your graphics Categories : HTML, Java Script, Security
	Javascript Background Scroller Categories : Java Script, CSS, HTML
	Clock at Status Bar Categories : Java Script, HTML, Date Time
	complete simply working javascript password generator file. Use letter, vowels, consonants (uppercase and lowercase) arrays to create a really random and secure password. improved security using time functions to initialize random number generator. Categories : Java Script, HTML, Security, Authentication, Strings
	Builds JavaScript that updates the contents of one selector based on another. Categories : HTML, Java Script, PHP, Complete Programs, General
	Mordern Peroidic Table - Science Categories : Java Script, HTML, Charts and Graphs
	Form Processing : with alert Highlight field name which is not filled by user Categories : Java Script, Form Processing, Data Validation, Beginner Guides, Web Design