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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.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;
} |
- HTML5 iPhone site development – Part 1
- Tooltip using CSS3 – HTML5 iPhone Website Part 3
- CSS 3.0 Tools – Don’t reinvent the wheel
It’s cool to create a tooltip tail by an extra div, but when using css3, we should use :after & :before pseudo classes. There are lot of fast tricks available, rather than writing that much css..
#yourDivId:after{
border-style:solid;
border-width:5px 8px 5px 0;
border-color:transparent #6A6A6A;
bottom:auto;
content:”;
display:block;
left:0px;
position:absolute;
top:8px;
width:0
}
OR
#yourDivID:after{
display: block;
border-color: #a0c7ff #fff #fff #fff;
border-style: solid;
border-width: 20px;
width: 0px;
height: 0px;
}
http://jsfiddle.net/BoltClock/duZAx/8/
http://stackoverflow.com/questions/5623072/how-can-i-create-a-tooltip-tail-using-pure-css#answer-5623150