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.

<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

Up Next
    Ebook Download
    View all
    Learn
    View all