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

HTML Menus

In web designing the most important component is Menus. Almost 90% of the web sites we see today contains menus. Now we are going to see how can we make these menus through HTML without using any advanced tools like Adobe Dreamweaver etc..
There are many ways to create menus
1)Using Div's
2) Using Lists

We will see the first one i.e Div which is very flexible

Step-1: Open any html editor or an IDE and write the following html code
<html>
    <head>
        <title>Menustitle>
    <head>
    <body>
    <div class="Menu">                
        <div class="MenuItems">
            <a href="#">Homea>
        </div>
        <div class="MenuItems">
            <a href="#">Htmla>
        </div>
        <div class="MenuItems">
            <a href="#">Cssa>
        </div>
        <div class="MenuItems">
            <a href="#">JavaScripta>
        </div>
        <div class="MenuItems">
            <a href="#">AJAXa>
        </div>
    </div>
    </body>
</html>​
You will see the following output as shown below:

From the above image we can see that the div items are aligned vertically and due to anchor tag's default css properties the text got underlined. Now to remove the underline add the css lines to your code as shown below
a
{
 text-decoration:none;
}
 which results in the following output:

Now we have to align them horizontally to do this add the css properties to the MenuItems as
.MenuItems
{
    width:200px;
    height:30px;
    vertical-align:middle;    
    display:table-cell;
    text-align:center;
}


which results in the following output:

From the above output we can see that there is a small gap between the border and the MenuItems and also we can use border so make it look more beautiful.


To remove the gap add the css property to the Menu
.Menu
{
 position:absolute;
 top:0px;
 left:0px;
}
To add the border use css border-style and border-width properties as shown below
.Menu
{
    position:absolute;
    top:0px;
    left:20%;
    width:60%;
    border-style:solid;
    border-width:thin;
}
This results as 

Almost done we have to add more styling and make it look beautiful, add the following css lines to Menu and MenuItems
.Menu
{
    position:absolute;
    top:0px;
    left:20%;
    width:60%;
    border-style:solid;
    border-width:thin;
}
.MenuItems
{
    width:200px;
    height:30px;
    vertical-align:middle;    
    display:table-cell;
    text-align:center;
    background-color:gray;
    border-style:solid;
    border-top-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
    border-right-width:thin;
}


see from the above that we are using width as 60% and left as 20% which means that we are aligning the menu towards the center of the screen

And the final thing when we move the mouse over the menu the background color should change so that user know's the response.
To do so as the following css 


div.MenuItems:hover
{
    background-color:#424242;    
}

That's it designing a Menu is as simple as that.