Introduction
There are quite a good number of web pages in the Internet that has this feature: When you move your mouse pointer over a phrase or word on the page, a small pane shows up. This pane has text and HTML elements referring to the word or phrase. The pane might even have links for you to click and go to a different page. In this article I show you how to create such a pane.

You need basic knowledge in HTML, CSS and JavaScript to understand this article.

Note: If you cannot see the code or if you think anything is missing in this article (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Absolute Positioning Property
When you give an HTML inline element a CSS absolute position property, and a high z-index value, but you do not give it a left, top, right and bottom position property, at the browser, the element stays where you put it, in the normal flow. It will not occupy space, but it will cover the other HTML elements or text, near it. This is the property we exploit to display the pane.

An Example
We consider an example in which a web page has a DIV element. This DIV element has a lot of text. Within the text there is a hyperlink. The content of this hyperlink is the word, “Important”. When the mouse pointer goes over this word, “Important” a pane appears. For this example, here is the code for the DIV element:

    <div>
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text <a href="http://somewebsite.com" onmouseover="show()">Important</a><p id="P1"><button type="button" class="close" onclick="remove()">X</button>Line One <br />Line Two<br />Line Three</p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
    </div>

The pane
The pane is an HTML Paragraph element. This is the code for the paragraph element:

<p id="P1">
    <button type="button" class="close" onclick="remove()">X</button>
    Line One <br />
    Line Two<br />
    Line Three
</p>

The Paragraph element is initially not displayed. So the value of its CSS display property is “none”.  The ID of the Paragraph element is “P1”. The first element inside the paragraph is a button. When this button is clicked, a JavaScript function is called that removes the Paragraph element from the display (screen). In other words, this button closes the Pane. You then have three short lines of text with two line break elements. The paragraph element is given a width value at the style sheet.

The paragraph tags are coded next to the A (hyperlink) element. In the style sheet the Paragraph element has an Absolute Positioning Property and a z-index value of 2. When the mouse pointer goes over the A element (having the word “Important”), JavaScript changes the value of the display property of the Paragraph element to “inline”. Since in the style sheet, the Paragraph element has the absolute positioning property and a z-index value of 2, without the left, top, right and bottom properties, it appears next to the A element. It appears next to the word, “Important”, covering the text around it.

The Style Sheet and JavaScript
This is the style sheet and JavaScript for the example:

<style type="text/css">
    p#P1 {display:none; background-color:ivory; position:absolute;z-index:2; width:15%}
    button.close {float:right}
</style>
<script type="text/javascript">
    var appearance = "notShown"
    function show()
        {
            if (appearance == "notShown")
                {
                    document.getElementById('P1').style.display = "inline";
                    appearance = "shown";
                }
        }

    function remove()
        {
            document.getElementById('P1').style.display = "none";
            appearance = "notShown";
        }
</script>

The first line in the style sheet is for the Paragraph element (pane). I have explained everything in that line apart from the background color. You need to give the paragraph element a background color. If you do not do this, the Paragraph element would be transparent. You can even give the Paragraph element a background image, or give the element some design. For this example the background color is ivory.

The second line in the style sheet is for the Close button. This is a normal button; when clicked, it calls the JavaScript function, remove().

The JavaScript has one global variable and two functions. The name of the global variable is appearance. It can have the value, "shown" to indicate that the paragraph is displayed or it can have the value, “notShown” to indicate that the Paragraph is not displayed.

The A element having the word, “Important” has the onmouseover attribute. When the mouse pointer goes over the A element, the value of this attribute, calls the function, “show()”. This function changes the value of the display property for the paragraph element to “inline” and sets the value of the variable, appearance, to “shown”. When the value of the display property of the paragraph element is inline, it is displayed. Since the paragraph element has the CSS properties mentioned above, it is displayed in front of the other elements (text) around it.

When the Close button in the Paragraph element is clicked, the function, remove() is called. This function sets the value of the display property of the paragraph element to “none”.  It also sets the value of the variable, appearance, to “notShown”. When the value of the display property of the Paragraph element is “none” the paragraph element is not displayed (removed from screen).

So, to make a pane pop up when the mouse is over some text in a Web Page, make use of CSS Absolute Positioning.

Chrys