Tooltip using CSS3 – HTML5 iPhone Website Part 3

This post is part of series HTML5 iPhone Website

How can we make a tool tip bubble using CSS3.

A tool tip is a box and an arrow at the edge pointing something. We can create this using two divs or one div and a span, one in normal mode and the other rotate through 90 degree or nearer.

Then, we make them rounded corners, borders, and by changing z-index, we move the smaller div behind the main div, then it will look like this:

Here is the CSS for the above tool tip

.menutool {

position:absolute;right:10px; width: 180px;height: 61px; padding-top: 15px; padding-left: 22px; margin-top: 10px;;
background: #f0f0f0;

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

-webkit-box-shadow: 2px 2px 3px 1px #8c8c8c;
-moz-box-shadow: 2px 2px 3px 1px #8c8c8c;
box-shadow: 2px 2px 3px 1px #8c8c8c;

border: 1px solid #8a8a8a;

z-index: 1000;

display: none;

}

.menutool span {width: 15px; height: 15px; top: -9px ; position: absolute; right: 13px ;

-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);

border-top: 1px solid #8a8a8a;
border-left: 1px solid #8a8a8a;

background: #f0f0f0;

z-index: 999;

}

Another example for tooltip bubble, (this is for bookmark tool tip for iPhone)

Here is the CSS for the above image

.bmpopup {

background: none repeat scroll 0 0 #F0F0F0;
border: 1px solid #8A8A8A;
border-radius: 8px 8px 8px 8px;
bottom: 13px;
box-shadow: 2px 2px 3px 1px #8C8C8C;
height: 60px;
left: 16%;
margin-top: 10px;
padding: 8px 12px;
position: fixed;
text-align: justify;
width: 180px;
z-index: 1000;
display:none;

}

.bmpopup span {width: 15px; height: 15px;  bottom: -9px ; position: absolute; left: 49% ;

-moz-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-webkit-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(45deg) translate(0px, 0px) skew(0deg, 0deg);

border-right: 1px solid #8a8a8a;
border-bottom: 1px solid #8a8a8a;

background: #f0f0f0;

z-index: 999;

}