Horizontal Tooltip Menu Using JQuery


Introduction

This article will show you how to create an animated Horizontal Tooltips Menu using jQuery and CSS step by step. Tooltips are a great solution to provide  a little bit more information or optional extra navigation for the readers; Tooltips are a common graphical user interface element, used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a small box appears with extra information regarding the item being hovered over. To give your tooltip extra functionality and vesatilty the best and simplest solution is using JavaScript, especially jQuery.

Step 1: First we have to create a Web Application.

  • Go to Visual Studio 2010.
  • New--> And select the Web Application.
  • Give whatever name you want to.
  • Click OK.
img1.gif

Step 2: Secondly you have to add a new page to the website.

  • Go to the Solution Explorer.
  • Right-click on the project name.
  • Select add new item.
  • Add new web page and give it a name.
  • Click OK.
img2.gif

img3.gif

Step 3 :  In this step we are adding an image in the "Images" folder of the project.

img4.gif

Step 4 : In this step add the CSS code inside the <style> tag and place it into the <head> section of your page.

<style type="text/css">
        body
        {
            font-familygeorgia;
            font-size14px;
        }
        a
        {
            text-decorationnone;
            color#333;
            outline0;
        }
        img
        {
            outline0;
            border0;
        }
        #menu
        {
            positionrelative;
            text-aligncenter;
            width583px;
            height40px;
        }
        #menu ul
        {           
            margin0;
            padding0;
            list-stylenone;
            displayinline
            positionabsolute;
            left110px;
            top0;
        }
        #menu ul li
        {
            margin0 5px
            floatleft;
        }
        
        #menu #box
        {
            positionabsolute;
            left0;
            top0;
            z-index200
            backgroundurl(tail.gif) no-repeat right center;
            height35px
            padding-right8px;
            margin-left5px;
        }
        #menu #box .head
        {
            backgroundurl(head.gif) no-repeat 0 0;
            height35px;
            colorred
            white-spacenowrap;
            padding-left8px;
            padding-top12px;
        }
</
style
>

Step 5: In this step we have to write the script reference to the aspx page; let us see from where you have to write the script code:

img5.gif

Right-click on the selected files respectively -> copy and paste it into the <Head> section of your page; see step 5.

Step 6: Let us see the script code to add inside the <script></script> tags and that will be placed either in the <head> section or the <body> section as you prefer.

<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<
script type="text/javascript" src="Scripts/jquery.js"></script
>

Step 7: In this step we have to write the jQuery code which is given below.

<script type="text/javascript">
        $(document).ready(function () {
            var style = 'easeOutExpo';
            var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
            var default_top = $('#menu li.selected').height();
            $('#box').css({ left: default_left, top: default_top });
            $('#box .head').html($('#menu li.selected').find('img').attr('alt'));
            $('#menu li').hover(function () {
                left = Math.round($(this).offset().left - $('#menu').offset().left);
                $('#box .head').html($(this).find('img').attr('alt'));
                $('#box').stop(falsetrue).animate({ left: left }, { duration: 500, easing: style });
            }).click(function () {
                $('#menu li').removeClass('selected');
                $(this).addClass('selected');
            });
            $('#menu').mouseleave(function () {
                default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
                $('#box .head').html($('#menu li.selected').find('img').attr('alt'));
                $('#box').stop(falsetrue).animate({ left: default_left }, { duration: 1500, easing: style });
            });
        });
  </script
>

Step 8: In this step you will see the body code of the Default2.aspx page which is given below.

Code:

<body>
    <div id="menu">
        <ul>
            <li><a href="#">
                <img src="Images/user.png" width="50" height="50" alt="My Profile" title=""/></a></li>
            <li><a href="#">
                <img src="Images/google.gif" width="50" height="50" alt="Google" title=""/></a></li>
            <li><a href="#">
                <img src="Images/Youtube.gif" width="50" height="50" alt="Youtube" title=""/></a></li>
            <li><a href="#">
                <img src="Images/Chrome.gif" width="50" height="50" alt="Chrome Web Store" title=""/></a></li>
            <li><a href="#">
                <img src="Images/Facebook.png" width="50" height="50" alt="Facebook" title=""/></a></li>
            <li class="selected"><a href="#">
                <img src="Images/setting.png" width="50" height="50" alt="Control Panel" title=""/></a></li>
        </ul>
        <div id="box">
            <div class="head">
            </div>
        </div>
    </div>
</body>

 Step 9: In this step we will see the complete code of the Default2.aspx page which is given below.

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title>Horizontal Tooltip Menu Using jQuery</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<
script type="text/javascript" src="Scripts/jquery.easing.1.3.js"></script>
<
script type="text/javascript" src="Scripts/jquery.js"></script
>
<style type="text/css">
        body
        {
            font-familygeorgia;
            font-size14px;
        }
        a
        {
            text-decorationnone;
            color#333;
            outline0;
        }
        img
        {
            outline0;
            border0;
        }
        #menu
        {
            positionrelative;
            text-aligncenter;
            width583px;
            height40px;
        }
        #menu ul
        {           
            margin0;
            padding0;
            list-stylenone;
            displayinline
            positionabsolute;
            left110px;
            top0;
        }
        #menu ul li
        {
            margin0 5px
            floatleft;
        }
        
        #menu #box
        {
            positionabsolute;
            left0;
            top0;
            z-index200
            backgroundurl(tail.gif) no-repeat right center;
            height35px
            padding-right8px;
            margin-left5px;
        }
        #menu #box .head
        {
            backgroundurl(head.gif) no-repeat 0 0;
            height35px;
            colorred
            white-spacenowrap;
            padding-left8px;
            padding-top12px;
        }
</
style
>
<script type="text/javascript">
        $(document).ready(function () {
            var style = 'easeOutExpo';
            var default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
            var default_top = $('#menu li.selected').height();
            $('#box').css({ left: default_left, top: default_top });
            $('#box .head').html($('#menu li.selected').find('img').attr('alt'));
            $('#menu li').hover(function () {
                left = Math.round($(this).offset().left - $('#menu').offset().left);
                $('#box .head').html($(this).find('img').attr('alt'));
                $('#box').stop(falsetrue).animate({ left: left }, { duration: 500, easing: style });
            }).click(function () {
                $('#menu li').removeClass('selected');
                $(this).addClass('selected');
            });
            $('#menu').mouseleave(function () {
                default_left = Math.round($('#menu li.selected').offset().left - $('#menu').offset().left);
                $('#box .head').html($('#menu li.selected').find('img').attr('alt'));
                $('#box').stop(falsetrue).animate({ left: default_left }, { duration: 1500, easing: style });
            });
        });
  </script
>
<head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">
                <img src="Images/user.png" width="50" height="50" alt="My Profile" title=""/></a></li>
            <li><a href="#">
                <img src="Images/google.gif" width="50" height="50" alt="Google" title=""/></a></li>
            <li><a href="#">
                <img src="Images/Youtube.gif" width="50" height="50" alt="Youtube" title=""/></a></li>
            <li><a href="#">
                <img src="Images/Chrome.gif" width="50" height="50" alt="Chrome Web Store" title=""/></a></li>
            <li><a href="#">
                <img src="Images/Facebook.png" width="50" height="50" alt="Facebook" title=""/></a></li>
            <li class="selected"><a href="#">
                <img src="Images/setting.png" width="50" height="50" alt="Control Panel" title=""/></a></li>
        </ul>
        <div id="box">
            <div class="head">
            </div>
        </div>
    </div>
</body>

</html>

Step 10: In this step we will see the design of the Default2.aspx page which is given below.

img6.gif

Step 11: In this step we are going to run the Default2.aspx page by pressing F5.

img71.gif

Now MouseHover on the Image for extra information.

img81.gif

img91.gif

 img101.gif

img111.gif

 img121.gif

Resources

Next Recommended Readings