This tutorial will cover how to have an information box appear when the cursor enters an element. This can be a great space saver and also save time so the user doesn't have to navigate to another page for more information on a topic. You could include a link to the full page within the information box.

You will see this sort of thing often with e-commerce sites where there will be an array of items and when the visitor hovers over a certain item, an information box comes up with more information, a photo, a price or whatever. The information box is part of the DOM and included in the page, but the initial visibility of the information box is set to display: none. This tutorial will use animation effects for the visibility of the information box then slide it into place.

As the visitor hovers over the item, the information box will move into a location so that the original element is still visible. For our tutorial, we will leave the previously displayed information boxes on the screen, but change the stacking order. It would be simple to set previously displayed information boxes to hide as well.

This tutorial will use the jQuery API .mouseenter(), .animate().css(), .show(), .parent(), .hide() and .find()  methods.

 

jquery-blank.html

Create a new document: tutorial-11.html

We will start out with the basic jQuery document that was created in Tutorial 1.

Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-11.html.


Create the HTML elements

Inside of the <body>...</body> tags we are going to create the topic boxes which will always be visible, the information boxes that will initially be invisible and a reset button.

Type the following into your open document:

<body>
<div id="container">
<div class="topicBox">
    <h3>Hammer</h3>
</div>
<div class="topicBox">
    <h3>Saw</h3>
</div>
<div class="topicBox">
    <h3>Wrench</h3>
</div>
<div id="hammer" class="hoverBox">
    <img src="/images/hammer.jpg" alt="Illustration of a hammer"/>
    <h3>Hammer</h3>
    <p>Used for pounding in nails and pulling nails out.</p>
    <p>Also useful for closing the lid on paint cans and cracking nuts</p>
    <p>X</p>
</div>
<div id="wrench" class="hoverBox">
    <img src="/images/wrench.jpg" alt="Illustration of a wrench"/>
    <h3>Wrench</h3>
    <p>Used for tightening and loosening bolts.</p>
    <p>Comes in set sizes and adjustable</p>
    <p>X</p>
</div>
<div id="saw" class="hoverBox">
    <img src="/images/saw.jpg" alt="Illustration of a saw"/>
    <h3>Saw</h3>
    <p>Used for cutting wood and removing tree branches.</p>
    <p>Also useful making musical sounds.</p>
    <p>X</p>
</div>
<input type="button" name="refresh" id="refresh" value="REFRESH PAGE" />
</div>
</body>


Style the HTML elements

Let's add some styling to create the container to hold it all, the box for the visitor to click and then place the balloons out of sight. Above the closing </head> tag, you will see the <style type="text/css">...</style> section.

We need to position the information boxes with the property of position: absolute in order for the final position just below the topic box.

Add the following:

<style type="text/css">
    body{font-family: sans-serif;}
    #container {position: relative;width: 500px; height: 450px; background: #fff; margin: 0 auto;padding: 15px;}
    .topicBox {width: 100px; border: #444466 solid 3px; color: #444466;float: left;text-transform: uppercase;text-align: center;margin-left: 5px;width: 30.5%;}
    .hoverBox {width: 210px;padding: 10px; background: #fff;position: absolute;box-shadow: 0 0 8px 1px rgba(0,0,0.8); display: none; height: 325px; z-index: 10; }
    .hoverBox p:last-child {color: #777;position: absolute; border: 1px solid #777;padding: 2px 5px;bottom: 0;right: 0;cursor: pointer;margin: 0;}
    input {position: absolute;bottom: 0px;left: 0;z-index: 3;}
</style>


Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

<script type="text/javascript">
    $(document).ready(function(){
        $(".topicBox").mouseenter(function(){
            $(".hoverBox").css("zIndex","10");
            var currBoxLoc = $(this).position();
            var toolName = "#" + ($(this).find("h3").html().toLowerCase());
            var hoverBoxLocLeft = (currBoxLoc.left + 3) + "px";
            var hoverBoxLocTop = (currBoxLoc.top + 60) + "px";
            $(toolName).css("zIndex","15");
            $(toolName).show(300).animate({
                top: hoverBoxLocTop,
                left: hoverBoxLocLeft,
            },300, "linear");
        });
        $(".hoverBox p:last-child").click(function() {
            $(this).parent().hide();
        });
        $("#refresh").click(function() {
            location.reload();
        });
    }); // END document.ready
</script>


Let's go thru the script step by step:

$(".topicBox").mouseenter(function(){

the script starts off with the .mouseenter() method to create a series of steps when the visitor's cursor goes over an element with class="topicBox"

$(".hoverBox").css("zIndex","10");

levels any previously opened information boxes. the script will be setting the information box in question to a higher z-index later on in the program

var currBoxLoc = $(this).position();

get the position of the topic box or $(this) (the element that received the action of .mouseenter()) so that we can position the information box properly

var toolName = "#" + ($(this).find("h3").html().toLowerCase());

we are declaring a variable to hold the value for which information box to display, and using the .find() method to find the closest h3 tag to the element that received the action of mouseenter, retrieving the contents of the h3 tag and making sure it is all lower case with the JavaScript function of .toLowerCase()

 


Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:

file:///C:/jquery-tutorials/tutorial-11.html

When you open up the document, you should see something like this.