How to Put the PHP Code in Tooltip
The PHP Web developer uses the PHP scripting language to introduce dynamic content into his website. For example, the developer may code a PHP script to retrieve data from a database and integrate the data with the website. The developer may choose to present that data inside of pop-up window. The jQuery Tools tooltip window uses the jQuery JavaScript framework library to present an attractive pop-up window that displays information about a website element. When a user hovers over the element, the tooltip window appears and displays the PHP message.
Other People Are Reading
Instructions
-
-
1
Connect to your database, retrieve the tooltip text, and store it in a variable. Consider the following example. PHP connects to a MySQL database using the PHP "mysql_connect" function, retrieves instances from the tooltipTextTable with "mysql_query" and uses the PHP "while" loop to assign each instance to a tooltipText variable:
<?php
mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("yourDatabase") or die(mysql_error());
$data = mysql_query("SELECT * FROM tooltipTextTable")
or die(mysql_error('No Records Found'));
while($info = mysql_fetch_array( $data ))
{
$tooltipText = $info['tooltipText'];
}
?>
-
2
Attach the jQuery tools library and call the jQuery tools tooltip element. Assign the element with the identity of the target div. In this example, the jQuery tools library has been embedded, and a jQuery code calls the tooltip element for all images that have a title and are inside of the tooltip div:
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
<script>
$("#tooltip img[title]").tooltip();
</script>
-
-
3
Incorporate the tooltip call within the PHP code. Look at this sample PHP code. The PHP print command has been used to place the tooltip div around the PHP "while" loop. For each occurrence of the tooltipText variable, an HTML image tag has been printed. The tooltipText variable has been assigned to the title tag of each instance of the image. When a user hovers over the image, the jQuery tooltip element will be called and the text inside of the title tag will be displayed inside of the tooltip window.
<?php
mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("yourDatabase") or die(mysql_error());
print "<div id='tooltip'>";
$data = mysql_query("SELECT * FROM tooltipTextTable")
or die(mysql_error('No Records Found'));
while($info = mysql_fetch_array( $data ))
{
$tooltipText = $info['tooltipText'];
print"<img src='anImage.jpg' title='" . $tooltipText . "'/>";
}
print "</div>";
?>
-
1
Tips & Warnings
Once placed within the proper tags, the completed version of the sample code is as follows:
<html>
<head>
<script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
</head>
<body>
<?php
mysql_connect("localhost", "username", "password") or die(mysql_error());
mysql_select_db("yourDatabase") or die(mysql_error());
print "<div id='tooltip'>";
$data = mysql_query("SELECT * FROM tooltipTextTable")
or die(mysql_error('No Records Found'));
while($info = mysql_fetch_array( $data ))
{
$tooltipText = $info['tooltipText'];
print"<img src='anImage.jpg' title='" . $tooltipText . "'/>";
}
print "</div>";
?>
<script>
$("#tooltip img[title]").tooltip();
</script>
</body>
</html>
References
- Photo Credit Comstock/Comstock/Getty Images
