Introduction
This article explains how to create a ToolTip in PHP. A ToolTip is a very attractive feature for projects. I will explain tooltips using some extra additional files. Such as the "tooltipExample.js" and "tooltipExample.css" files.
Example
This is your head section part. This code is put into the head section of the HTML.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="tooltipExample.js">
</script>
<link rel="stylesheet" type="text/css" href="tooltipExample.css" />
This is for the body section. This code is put into the body section of the HTML.
<p>Look here Tooltip Example</p>
<p><a href="soft1.jpg" data-tooltip="right1">Teachers</a></p>
<p><a href="soft2.jpg" data-tooltip="right2">Developeres</a></p>
<p><img src="image3.jpg" data-tooltip="right3" /></p>
<div id="hellotooltip" class="righttooltip">
<div style="padding:5px">
//add extra element in dev section like this
<div id="right1" class="hello" style="width:290px">
<img src="soft1.jpg" /><br />
</div>
<div id="right2" class="hello" style="width:280px">
<img src="soft2.jpg" /><br />
</div>
<div id="right3" class="hello">
<img src="image3.jpg" />
</div>
</div>
<div class="rightstatus"></div>
</div>
This is your final code for creating the ToolTip. You can add an extra Tooltip add element in the div section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>ToolTip</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="tooltipExample.js">
</script>
<link rel="stylesheet" type="text/css" href="tooltipExample.css" />
</head>
<body>
<p>Look here Tooltip Example</p>
<p><a href="soft1.jpg" data-tooltip="right1">Teachers</a></p>
<p><a href="soft2.jpg" data-tooltip="right2">Developeres</a></p>
<p><img src="image3.jpg" data-tooltip="right3" /></p>
<div id="hellotooltip" class="righttooltip">
<div style="padding:5px">
<div id="right1" class="hello" style="width:290px">
<img src="soft1.jpg" /><br />
Many teachers working here for sharing knowledge
</div>
<div id="right2" class="hello" style="width:280px">
<img src="soft2.jpg" /><br />
PHP software or project related article
</div>
<div id="right3" class="hello">
<img src="image3.jpg" />
</div>
</div>
<div class="rightstatus"></div>
</div>
</body>
</html>
Output
![cal1.jpg]()
This Tooltip is revealed when the mouse rolls over them. Such as:
![cal.jpg]()