Pure CSS3 Tooltips

pure-css3-tooltipVery simple pure CSS3 Tooltips using :hover for the tip itself, the CSS3 ‘transition’ property for a nice effect when the tooltip comes in, rgba for the background property for slight transparency on the tooltip and the :after pseudo class for a small arrow to complete the effect.


The HTML is very simple. Just put your tooltip trigger text/image/other content within a standard <a> tag (with the toolTip class so we know to target it) and put the tooltip text in a nested <span>:

<a href="#null" class="toolTip">(?)
<span>There are many variations of passages of Lorem Ipsum available, 
but the majority have suffered alteration in some form, by injected 
humour, or randomised words which don't look even slightly 

You must relatively position the <a> so the toolTip knows where to base itself as it will be absolutely positioned:

	position: relative;

You will want the toolTip to be hidden initially, so when you declare it’s appearance in the CSS, you must also hide it. You also set up the transition here to allow the animation to occur when it opens. When I put this together, safari still required the -webkit prefix for transition. Chrome and Firefox were fine, however for peace of mind, I put in all the prefixes. At sometime in the near future these will not be needed:

.toolTip span{
	/*hiding it by moving it behind the main content*/
	z-index: -5;
	/*Set the start opacity to 0 so we can fade it in nicely using transitions*/
	opacity: 0;
	background: rgba(0, 0, 0, 0.8);
	border-bottom: 30px none transparent;
	border-radius: 5px 5px 5px 5px;
	bottom: 25px;
	color: #FFFFFF;
	font-size: 12px;
	padding: 10px;
	position: absolute;
	left: -10px;
	text-align: justify;
	width: 300px;
	transition: all 0.3s ease-out 0s;
        -webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;

When the <a> is hovered, we need to show the toolTip, we also change the position and the opacity from those declared above so we get a nice animation when it appears:

.toolTip:hover span{
	bottom: 30px;
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	display: block;
	opacity: 1;
	left: -5px;
	z-index: 9;

And finally, to complete the effect, use the :after pseudo class to apply a small arrow:

.toolTip span:after {
	border-color: rgba(0, 0, 0, 0.8) transparent;
	border-style: solid;
	border-width: 15px 15px 0 0;
	bottom: -15px;
	content: "";
	display: block;
	position: absolute;
	left: 20px;
	width: 0;

And you have pure CSS3 tooltips. Any questions or comments? I’d love to hear them!

Removing default input styles in iOS Safari

iOS Safari (and other mobile device browsers) apply their own default styling to HTML form input elements with rounded corners, drop shadows and bevels.

If you want to remove this styling, leaving you with a blank canvas to apply your own styles, you will struggle to using just the standard CSS properties such as “border”, “border-radius”, “box-shadow”, etc.

You can simply use the CSS “appearance” property to remove these styles:

-webkit-appearance: none;
-moz-appearance: none;
appearance: none;

Diagnosing a white space issue at the top of the page – UTF-8 BOM

I had a frustrating issue on a site I’ve been working on where I was getting a block of white-space at the top of the web page. I made sure I had no padding or margin on my <body> element and no margin on my page header causing it to sit lower than it should.

Notice the whitespace above the header and it highlighted in Firebug

Notice the whitespace above the header and it highlighted in Firebug

When, inspecting the DOM in firebug, the white space could be clearly seen. It was not showing up, however, when I viewed the page source.

After a decent amount of research, I came a useful post on Stack Overflow (http://stackoverflow.com/questions/10199355/php-include-causes-white-space-at-the-top-of-the-page). The issue turned out to be related to the file encoding. The header on my page was created in Notepad++ by one of my colleagues and it seems to have been saved in UTF-8 format with BOM (byte order mark) which is a signature at the start of the file.

The BOM was invisible to me in my text editor – Sublime 2 but was being picked up by the browser when the header file was included in my template.

Sublime 2 has a “Save with encoding” feature which allows you to save as UTF-8 with our without BOM. My solution was to simply Save with encoding > UTF-8.