Tags

, , , , , , , , , ,

This sections explains on how to build a simple tooltip with arrow head. This uses jquery and css. No image are involved.

Ref : http://jsfiddle.net/johngcek/daLyL/1/

tooltip

CSS:
.arrow{
width: 50px;
position: absolute;
height: 24px;
overflow: hidden;
margin-left: 84px;
}
.arrow:before{
content: "";
width: 50px;
position: absolute;
height: 50px;
-webkit-transform: rotate(45deg);
border: 1px solid red;
top: 12px;
border: 2px solid;
z-index: 10;
background: white;
}

This is the code to get the arrow head. Now we need to have the section to show the text contents in the tooltip popup.

.abc{
width: 150px;
height: 150px;
position: absolute;
margin-top: 22px;
border: 2px solid;
border-radius: 8px;
background: white;
}

The CSS part is complete, now we can move to the jquery part. jQuery is used to popup the tooltip. The logic that I have used here is to create a div on the fly, add the above written classes to the new div.

jQuery:
$(this).after($("

",{id: "m1", style:""}).addClass("c12")); -> outer container
$("#m1").html('

');

I have added the complete code below in an example.
Logic :
Initially the text box named “tooltipS” is shown. When mouse overed in this, we will call the jquery part to create a new div. Then we will add 2 new div, for arrow and the tooltip text content, in this outer div. Then we will add the above given classes to these div’s.
There are some conditions added to prevent some basic issues like the tooltip popup showing in multiple, hide out the tooltip etc..

Please check the code and play with the code so that you can have more out of the basic model.
Note : This code requires jquery to run. Check for the working code in the jsfiddle, link given above.

Complete code :

.tooltip{
position: absolute;
}
.arrow{
width: 50px;
position: absolute;
height: 24px;
overflow: hidden;
margin-left: 84px;
}
.arrow:before{
content: "";
width: 50px;
position: absolute;
height: 50px;
-webkit-transform: rotate(45deg);
border: 1px solid red;
top: 12px;
border: 2px solid;
z-index: 10;
background: white;
}
.abc{
width: 150px;
height: 150px;
position: absolute;
margin-top: 22px;
border: 2px solid;
border-radius: 8px;
background: white;
}
.c12{
width: 155px;
height: 155px;
display:none;
}

$(function(){
$("[name=tooltipS]").on("mouseover",function(){
if(!$("#m1").length){
$(this).after($("

",{id: "m1", style:""}).addClass("c12"));
$("#m1").html('

');
$("#m1").show("fade",1000);
}
else{
$("#m1").toggle();
}
});
/* This is for mouseout functionality - use only when required. */
$("[name=tooltipS]").on("mouseout",function(){
$("#m1").remove();
});
});

Advertisements