Introduction
This article explains how to create a Textual Tooltip with jQuery in PHP. You can use this article and provide an information about of a textual link. For creating this program, you will create a JavaScript array and a function and then create a link of your text in the dive section. Such as in the following description.
Example
This is the script for the head section.
<script>
var content = new Array()
content[0] = '<b>PHP</b><br>PHP is a open source scripting language'
content[1] = '<b>HTML</b><br>HTML is a language for describing web pages.'
content[2] = '<b>CSS</b><br>CSS stands for Cascading Style Sheets Styles define how to display HTML elements.'
content[3] = '<b>JavaScript</b><br> JavaScript is the world most popular programming language.'
content[4] = '<b>JQuery</b><br>jQuery is a lightweight, "write less, do more", JavaScript library.'
content[5] = '<b>XML</b><br>XML was designed to transport and store data and HTML was designed to display data.'
content[6] = '<b>JSON</b><br>JSON is plain text JSON is "self-describing" (human readable) JSON is hierarchical (values within values) JSON can be parsed by JavaScript JSON data can be transported using AJAX.'
function textual() {
window.location.reload()
}
function textual2() {
if (document.plans) {
appear()
setTimeout("window.onresize=textual", 450)
}
}
function changetext(whichcontent) {
if (document.all || document.getElementById) {
cross_el = document.getElementById ? document.getElementById("descriptions") : document.all.descriptions
cross_el.innerHTML = '<font face="Verdana"><small>' + whichcontent + '<font></small>'
}
else if (document.plans) {
document.d1.document.d2.document.write('<font face="Verdana"><small>' + whichcontent + '</small></font>')
document.d1.document.d2.document.close()
}
}
function appear() {
document.d1.visibility = 'show'
}
window.onload = textual2
</script>
Next, this script is for the body section.
<div id="scriptmenu" style="line-height:20px"><p><strong><font
face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])"><small>PHP</small></a><br>
<a href="../dynamicindex3/index.html" onMouseover="changetext(content[1])"><small>HTML</small></a><br>
<a href="../dynamicindex2/index.html" onMouseover="changetext(content[2])"><small>CSS</small></a><br>
<a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])"><small>JavaScript</small></a><br>
<a href="index.html" onMouseover="changetext(content[4])"><small>JQuery</small></a><br>
<a href="../dynamicindex6/index.html" onMouseover="changetext(content[5])"><small>XML</small></a><br>
<a href="../dynamicindex10/index.html" onMouseover="changetext(content[6])"><small>JSON</small></a><br>
</font></strong></p>
</div>
<iplan id="d1" width="200" height="200" visibility="hide">
<plan id="d2" width="200" height="200">
<div id="descriptions" align="left">
<strong><font face="Verdana" color="#000000"><p>Example of textual Tooltip!<br>
</font></strong><font face="Verdana"><small>This is very interesting example of textual tooltip with jquery in php</small><br>
</font>
</div>
</plan>
</iplan>
This your final code for the textual Tooltip.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example of textual Tooltip</title>
<script>
var content = new Array()
content[0] = '<b>PHP</b><br>PHP is a open source scripting language and is a powerful tool for making dynamic and interactive Web pages. PHP is a widely used, free, and efficient.'
content[1] = '<b>HTML</b><br>HTML is a language for describing web pages.'
content[2] = '<b>CSS</b><br>CSS stands for Cascading Style Sheets Styles define how to display HTML elements.'
content[3] = '<b>JavScript</b><br> JavaScript is the world most popular programming language.'
content[4] = '<b>JQuery</b><br>jQuery is a lightweight, "write less, do more", JavaScript library.'
content[5] = '<b>XML</b><br>XML was designed to transport and store data and HTML was designed to display data.'
content[6] = '<b>JSON</b><br>JSON is plain text JSON is "self-describing" (human readable) JSON is hierarchical (values within values) JSON can be parsed by JavaScript JSON data can be transported using AJAX.'
function textual() {
window.location.reload()
}
function textual2() {
if (document.plans) {
appear()
setTimeout("window.onresize=textual", 450)
}
}
function changetext(whichcontent) {
if (document.all || document.getElementById) {
cross_el = document.getElementById ? document.getElementById("descriptions") : document.all.descriptions
cross_el.innerHTML = '<font face="Verdana"><small>' + whichcontent + '<font></small>'
}
else if (document.plans) {
document.d1.document.d2.document.write('<font face="Verdana"><small>' + whichcontent + '</small></font>')
document.d1.document.d2.document.close()
}
}
function appear() {
document.d1.visibility = 'show'
}
window.onload = textual2
</script>
</head>
<body bgcolor="#CCCCCC">
<div id="scriptmenu" style="line-height:20px"><p><strong><font
face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])"><small>PHP</small></a><br>
<a href="../dynamicindex3/index.html" onMouseover="changetext(content[1])"><small>HTML</small></a><br>
<a href="../dynamicindex2/index.html" onMouseover="changetext(content[2])"><small>CSS</small></a><br>
<a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])"><small>JavaScript</small></a><br>
<a href="index.html" onMouseover="changetext(content[4])"><small>JQuery</small></a><br>
<a href="../dynamicindex6/index.html" onMouseover="changetext(content[5])"><small>XML</small></a><br>
<a href="../dynamicindex10/index.html" onMouseover="changetext(content[6])"><small>JSON</small></a><br>
</font></strong></p>
</div>
<iplan id="d1" width="200" height="200" visibility="hide">
<plan id="d2" width="200" height="200">
<div id="descriptions" align="left">
<strong><font face="Verdana" color="#000000"><p>Example of textual Tooltip!<br>
</font></strong><font face="Verdana"><small>This is very interesting example of textual tooltip with jquery in php</small><br>
</font>
</div>
</plan>
</iplan>
</body>
</html>
Output
![textual.jpg]()
Hover the cursor over the link and the link information will appear.
![textual1.jpg]()
![textual3.jpg]()