Pure CSS glossy tool-tip window
In this tutorial we will be making a "glossy tool-tip window", or whatever you want to call it, using only CSS and HTML. This has a few advantages above using images, like smaller filesize and less HTTP requests, resulting in a faster page-load for the user. So first lets take a look at what we will be making:
Example
This is an example paragraph.
The example has a few cool features, like rounded borders, highlight, an icon and some sort of arrow-head. The one on the left is the pure CSS example and the one on the right is an image. If the one on the left doesn't look like the one on the right you are probably using Internet Explorer (Which doesn't support rounded borders) or an outdated browser.
The HTML
First things first. The HTML of the box is pretty simple, but there is one very important piece, which is the doctype. You have to use a strict doctype in order to make it work in Internet Explorer and Opera. Otherwise the css box-model will be messed up. Now lets take a look at the html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <style> /* Style will come here */ </style> </head> <body> <div class="box"> <div class="icon">?</div> <div class="highlight"></div> <div class="arrow"> <div class="arrow_overlay"></div> </div> <h2>Example</h2> <p>This is an example paragraph.</p> </div> </body> </html>
Everything outside the box-class-div is not important, so we have the following elements:
- A container div with the "box" class
- An extra div with the "icon" class
- An extra div with the "highlight" class
- An extra div with the "arrow" class, containing another div with the "arrow_overlay" class
- A h2 element
- A paragraph
The extra divs are for the special cosmetic pieces of the box, the h2 and p element for the contents and the container div for the background and borders. Its usually a bad idea to put things in the HTML that have no other purpose but styling, but since this is a pure CSS example there is no real alternative.
The box and content
So lets take a look at the box and it's contents first. As you can see it has a rounded border, which is the most difficult part, and a colored background. The text inside the box is not that important, but it looks slightly better with some styling, so we'll look at that too. Here is the CSS for the box class and the h2 and p elements:
.box {
position: relative; /* Allow positioned elements inside */
width: 240px;
height: 40px;
padding: 10px;
background: #bfdcff;
border: 3px solid #76b3ff;
-moz-border-radius: 10px; /* Rounded border mozilla browsers */
-webkit-border-radius: 10px; /* Rounded border webkit browsers */
border-radius: 10px; /* W3c rounded border */
}
#text .box h2, #text .box p {
position: relative; /* Place above the other elements */
margin: 0 0 0 52px;
color: #555555;
font: bold 16px arial;
}
#text .box p {
margin-top: 4px;
font: 12px "trebuchet ms";
}
I placed a comment next to the important parts. The position:relative of the container box does nothing to the position of the box itself, but absolute positioned elements inside the box will be relative to the box instead of the page.
The rounded border is the biggest problem, because only a few browsers support the w3c border-radius yet. We still need the '-moz-' prefix for the mozilla browsers, like Firefox and the '-webkit-' prefix for webkit browsers, like Safari and Chrome. Opera is currently the only main browser that supports 'border-radius', and the current versions of Internet Explorer don't support rounded borders at all (Only IE9, but it usually takes 10 years for the majority of IE users to switch over).
And the last comment is behind the position:relative of the h2 and p elements. This is very important, since elements with a relative or absolute position are placed above others and we want the highlight to have an absolute position. So lets see what this CSS shows us:
Example
This is an example paragraph.
The icon
Now lets create the icon (colored circle with the question-mark inside). This is quite easy, so i'll only show the CSS and the result:
.box .icon {
float: left;
border: 1px solid #76b3ff;
height: 40px;
width: 40px;
background: white;
text-align: center;
color: #555555;
font: bold 24px/40px "times new roman";
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
Which leaves us with the following (pretty cool) result:
Example
This is an example paragraph.
The highlight
Now it's time to create the highlight (the lighter part on the top of the box), which is a bit more difficult. Lets see the CSS first:
.box .highlight {
position: absolute; /* Absolute position relative to the box */
width: 100%; /* Width 100% of the box */
padding: 3px; /* Adds 3px to the width (100% + 3px) */
height: 28px;
top: -3px; /* Position over the box's left border */
left: -3px; /* Position over the box's top border */
background: white;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
filter: alpha(opacity=20); /* Other IE opacity */
opacity: .2; /* Opacity other browsers */
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
Example
This is an example paragraph.
I've commented the important pats again, so lets go over them:
- The absolute position places the highlight in the top-left corner of the containing element (the 'box') and removes itself from the normal positioning so the other elements will go over it.
- The width:100% gives the highlight the same width as the containing element (the 'box'), but this is only the inside of the parent element. So if we want the highlight covering the borders too, we need to add 3px to the width, which can be done by applying a padding. After that we slide the highlight 3px to the left and 3px to the top to place it over the border of the box element.
- All the 'highlight' does is make the top-half of the box slightly lighter. We do this by placing a semi-transparent div over the top with a white background and an opacity of 20%. The w3c opacity attribute is supported by most browsers, but not by Internet Explorer, so we add the '-ms-filter' and 'filter' attributes to create the opacity in most versions of IE.
- The last part of the CSS creates a rounded border in the top-left and top-right corner, which is not really necessary if you have a white background.
The arrow
The last thing that we have to make is the small triangle in the bottom-right part of the box. Its not really possible to draw with CSS, but with a little border-trick, its possible to create right-triangles. This is done by specifying a color and width for the top-border of an element and setting the left and right border to a width and transparent filling.
Using this trick, we create two triangles. One with the border-color, and a slightly smaller one with the background color of the box. The CSS for the 'arrow' looks like this:
.box .arrow, .box .arrow_overlay {
position: absolute; /* Position relative to the box */
width: 0px; /* No width */
height: 0px; /* No height */
bottom: -15px; /* position 15px below the bottom of the box */
right: 40px; /* Position 40px from the right of the box */
border-top: 15px solid #76b3ff; /* The triangle */
border-right: 15px solid transparent; /* Right width */
border-left: 15px solid transparent; /* Left width */
}
.box .arrow_overlay {
top: -15px; /* Position relative to the arrow */
left: -10px; /* Position relative to the arrow */
border-top: 10px solid #bfdcff; /* Smaller triangle */
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
Which gives us the following and final result:
Example
This is an example paragraph.
Thanks for reading this tutorial! Any questions can be posted below and the source file can be downloaded/viewed from this page: files/tutorials/css/glossy_tooltip/example.html
There is a problem though, the more content you add to it, the more you have to modify your code. Not really any good, but it's a good idea however.
Thats true, but you can also give the overlay a percentage width and height, and the question mark icon a negative margin and percentage position to give the box a more flexible width and height.
I just wanted to make it as simple as possible to show the general idea :)
Great tut was looking for this for a long time to add on my glegbor blog.Is it possible that the pop -up box appears for 1st time when a user enters on main page?The box should not appear again if the user visits the main page in the same tab but should appear again if he opens the main page in a new tab.
iA7iNA <a href="http://bptpgcptmigq.com/">bptpgcptmigq</a>
jy8Xhw , [url=http://eyujhqqhrtik.com/]eyujhqqhrtik[/url], [link=http://opzlfhsvnmxm.com/]opzlfhsvnmxm[/link], http://uowlqoasgyho.com/
Zhv5Ve <a href="http://hsydtdcdyuns.com/">hsydtdcdyuns</a>
y0XH1b , [url=http://wuffnpwvbbaf.com/]wuffnpwvbbaf[/url], [link=http://leoykajyrfon.com/]leoykajyrfon[/link], http://zjngegmckoqi.com/
V5LbWn <a href="http://nnonjuetvqjw.com/">nnonjuetvqjw</a>, [url=http://apvpmbwhcfyq.com/]apvpmbwhcfyq[/url], [link=http://nfnrsalsjbfd.com/]nfnrsalsjbfd[/link], http://kwvnbhlqehmy.com/