Tooltips without Images
An article posted on Apr 4, 2009.
I've written quite a few blog posts over the years relating to how to perform certain tasks. However, more often than not, I find it hard to show off a working demo. Starting today, all my "demo" blog posts will also have a link to a fully working example. Should help out people who just like to look at the source of how things work.
Now, onto today's topic, tooltips without images. They work by using some simple CSS to create an object that looks like a triangle instead of doing so with an image.
.notice {
color:white;
padding:10px;
background-color:black;
width:300px;
}
.notice .pointer {
float:left;
width:0;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:20px solid black;
border-bottom:0;
}
The "float" option dictates which side of the tooltip the arrow will reside on. Similarly, flipping border-top and border-bottom will reverse the direction of the arrow. Changing the border widths will alter the size and scale of the arrow.
Now, just throw the elements together in some DIVs, and it should turn out like the example at the top of the page.
<div class="notice"> This is some example text to be placed inside the tooltip. <div class="pointer"></div> </div>
Check out the demo at http://demo.1080degrees.net/tooltip/.
