Customized Tool Tip

These days Tool Tip has became a great tool for displaying dynamic data without refreshing the page. There is a default Tool Tip which is a simple rectangle which looks odd. Now I am going to create a customized tool tip like shown below...

Oval Tool Tip

First thing in designing this tool tip is to find out the logic. The oval which you are seeing is nothing but  a background image, which is placed inside a div tag.

To create this image open MS Paint and draw three small ovals and one big oval as shown below...

Oval Shape

Save this Image as Oval.jpg and add it to your folder where Html page is placed. Now create some Vertical menus. I am directly pasting the code how to create menus see my HTML Menus Post.
Html Content:


<div id="Menu">
        <div id="html" class="MenuItems">
            Html
        </div>
        <div id="ajax" class="MenuItems">
            AJAX
        </div>
        <div id="javascript" class="MenuItems">
            JavaScript
        </div>
        <div id="css" class="MenuItems">
            CSS
        </div>
        <div id="jquery" class="MenuItems">
            JQuery
        </div>
        <div id="Oval">
            <div id="Content">
            div>
        </div>
    </div>​

       

CSS Content:

#Menu
{
    width:10%;
    position:relative;
    left:0px;    
}
.MenuItems
{
    border:thin solid Gray;
    text-align:center;
    position:relative;
    background-color:Maroon;
    color:White;
    height:20px;
}
.MenuItems:Hover
{
    background-color:Red;
}


This create the following Page:

Vertical Menus 

The id's Oval and Content are nothing but parent and child div which is used to hold the Oval image as their background. To set their background use the css style property background-image. Below is the actual code...

#Oval

{

    background-image:url('../Oval.jpg');        

    width:300px;

    height:150px;

}

Since my Image is in my parent directory i use ../ This css settings create the parent div tag as below...

Oval Div

Now we have to add child Div to enable to write content so that the text appears to be in the oval. In order to show the child div i use background color...
 The Css for child div is :
#Content
{    
    width:165px;
    height:100px;
    position:relative;    
    background-color:Gray;
    left:30%;
    top:30px; 
}


These Css settings create the child div as follows:

Child Div with background color

Later we have to remove the background-color property to make it as a real oval content. Now the position of the entire Parent Div is below the Vertical menus what we want is when the user moves the mouse over the menu item we have to show them a tool tip hence initially we will hide the Div and later we will show the Div using Jquery.
You can learn JQuery from http://www.w3schools.com/jquery/default.asp as it is very easy.
Modify the Css content of the Parent and Child Div's as shown below.
#Oval
{
    background-image:url('../Oval.jpg');        
    width:300px;
    height:150px;
    visibility:hidden;
    position:absolute;    
}
#Content
{    
    width:165px;
    height:100px;
    position:relative;    
    left:30%;
    top:30px; 
}


Now add the following script inside the head content, first provide a link for the jQuery library as shown below...

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
script>​



Now when the user moves his mouse over the menu item we have to display the tool tip at the end of the menu item to do that we use the Css property's called position, left and top. Since the Parent Div i.e Oval is inside of  Menu(div) hence it displays relatively to the Menu Items.
To set the position of the tooltip at the end of the menu item use the following logic..
$("#Oval").css("left", ($(this).position().left+$(this).width()+2) + "px");


$(this).position().left represents the current menu item position 
$(this).width() represents the current menu item width 
2(px) is used for adjusting the tool tip away from the end of the menu item


Similarly adjust the position of the top property as shown below
 $("#Oval").css("top", $(this).position().top + "px");


Now display the Tool Tip when the user moves his mouse over the menu...
$("#Oval").css("visibility", "visible");


Now add the content dynamically to show the effect...
$("#Content").html("Hi this is from inner div." +
                "This div is the clild div." +
                "The parent div has Oval as background." +
                "This is currently showing from " + $(this).text());


Now the final one is that when the user moves his mouse away from the menu item we should hide the tool tip to do so add the following script...
$(".MenuItems").mouseout(function () {
                $("#Oval").css("visibility", "hidden");
            });


The entire JavaScript is shown below...


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
    </script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".MenuItems").mouseover(function () {
                $("#Oval").css("left", ($(this).position().left+$(this).width()+2) + "px");
                $("#Oval").css("top", $(this).position().top + "px");
                $("#Oval").css("visibility", "visible");
                $("#Content").html("Hi this is from inner div." +
                "This div is the clild div." +
                "The parent div has Oval as background." +
                "This is currently showing from " + $(this).text());
            });
            $(".MenuItems").mouseout(function () {
                $("#Oval").css("visibility", "hidden");
            });
        });
    </script>​



Hence the following result is shown below...

Final result for the Customized Tool Tip