Textual Tool Tip With jQuery in PHP

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.

var content = new Array()

content[0] = 'PHP PHP is a open source scripting language'

content[1] = 'HTML HTML is a language for describing web pages.'

content[2] = 'CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements.'

content[3] = 'JavaScript JavaScript is the world most popular programming language.'

content[4] = 'JQuery jQuery is a lightweight, "write less, do more", JavaScript library.'

content[5] = 'XML XML was designed to transport and store data and HTML was designed to display data.'

content[6] = 'JSON 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 = '' + whichcontent + ''

}

else if (document.plans) {

document.d1.document.d2.document.write('' + whichcontent + '')

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"><font

face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])">PHP</a>

<a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])">JavaScript</a>

<a href="index.html" onMouseover="changetext(content[4])">JQuery</a>

</div>

Example of textual Tooltip!

This is very interesting example of textual tooltip with jquery in php

</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">

<head>

<title>Example of textual Tooltip</title>

var content = new Array()

content[0] = 'PHP 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] = 'HTML HTML is a language for describing web pages.'

content[2] = 'CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements.'

content[3] = 'JavScript JavaScript is the world most popular programming language.'

content[4] = 'JQuery jQuery is a lightweight, "write less, do more", JavaScript library.'

content[5] = 'XML XML was designed to transport and store data and HTML was designed to display data.'

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 = '' + whichcontent + ''

}

else if (document.plans) {

document.d1.document.d2.document.write('' + whichcontent + '')

document.d1.document.d2.document.close()

}

function appear() {

document.d1.visibility = 'show'

}

window.onload = textual2

</script>

</head>

<div id="scriptmenu" style="line-height:20px"><font

face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])">PHP</a>

<a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])">JavaScript</a>

<a href="index.html" onMouseover="changetext(content[4])">JQuery</a>

</div>

Example of textual Tooltip!

This is very interesting example of textual tooltip with jquery in php

</div>

</plan>

</iplan>

</body>

</html>

Output

Hover the cursor over the link and the link information will appear.