Create a Speech-Bubble Tooltip using CSS3 and jQuery
26
There are a couple of ways to create tooltips, but I decided that I wanted to try and create a very lightweight and good looking tooltip without using any images.
There are a couple of ways to create tooltips, but I decided that I wanted to try and create a very lightweight and good looking tooltip without using any images.
I avoided learning how to create a jQuery plugin for quite a while because I thought it would be too difficult and/or too complicated to learn since I’m not a ‘hardcore’ programmer. Contrary to what I thought, it is actually pretty easy to create a plugin as long as you know the jQuery basics.
CSS shorthand properties make your CSS file look cleaner, easier to edit, easier to type and it reduces the total file size.
Recently, someone asked me how they would go about creating a ‘fading border’. I can’t recall ever seeing one, so I decided to create this tutorial.
Achieving IE opacity is a bit of an annoyance, no matter how you would like to achieve it. The most common way of doing this is to set a .png file as the background of an HTML element. Unfortunately IE 6 doesn’t support .png files without adding javascript to the page to enable .png opacity. It is beneficial to avoid using these files because it unnecessarily adds to the HTML requests.