CSS Tooltips - Floating HTML Elements |
TooltipsA small floating box that appears when you mouse over a link The <a> html element (link) allow you to define a tooltip, that shows up when you mousever the link, using the title attribute. However, this tooltip cannot be styled, and is "ugly", so we will create our own with just CSS. Example of a link with title attribute setExample of a CSS TooltipLinkThis is the CSS tooltip showing up when you mouse over the link What are floating boxes that make tooltips?One of the things I used to wonder for a while, before getting into CSS, is: what are those floating boxes that create tooltips, or show floating banners and the like? Example of a simple floating HTML ElementTo float an element, for example a DIV, all you need to do is add the following two styles:
<div class="floater">I am a floating div</div> <style> <!-- div.floater { position: absolute; z-index: 100; } --> </style> The above floats a 'div' Element by making it's position, absolute and brining it to the front of the screen with the style, z-index. <div class="floater" style="position:absolute;z-indez:100;">I am a floating div</div> The above floats a DIV by defining the style, position:absolute and z-index:100 in the html attributes. The position attribute defines how the html element is positioned with respect to the other html elements in the document. The z-index attribute defines the depth of the element. The smaller the z-index, the further back the element is on the screen. ie: an element with z-index:100; will float above an element with z-index: 50; Creating a tooltip with CSS and htmlKnowing how to float an element, we can create a tooltip with just plain CSS and no JavaScript. First lets create a format for writing tooltips into our HTML document. <a href="#"> Tooltip Link <span>Tooltip Popup Description</span> </a> Since our tooltips will show when putting yoru mouse over a link, we place it right in the link using the SPAN element. What we will do, is use CSS to:
a span { display: none; } a:hover { position: relative; } a:hover span { display: block; position: absolute; } a:hover span { top: 10px; left: 0; } The full code for CSS based Floating TipsI Love <a href="#">CSS<span>Cascading Style Sheets</span></a>. They allow me to create these nice hovering tips. <style type="text/css"> <!-- a:hover { position: relative; } a span { display: none; } a:hover span { display: block; position: absolute; top: 10px; left: 0; } --> </style> Pretty simple huh? I Love <a href="#">CSS<span>Cascading Style Sheets</span></a>. They allow me to create these nice hovering tips. <style type="text/css"> <!-- a { border-bottom: 1px dashed brown; text-decoration: none; } a:hover { position: relative; } a span { display: none; } a:hover span { display: block; position: absolute; top: 10px; left: 0; /* formatting only styles */ padding: 5px; margin: 10px; z-index: 100; background: #f0f0f0; border: 1px dotted #c0c0c0; opacity: 0.9; /* end formatting */ } --> </style> Advantages of a purely CSS TooltipIf you have used javascript for your tooltips before, you will know that it uses quite a bit of code. First you have to create the tooltip dynamically, then assign the necessary style attributes via javascript to make it float, then find out just where on the page to place it by recursively going back through all the parent elements of the link, and finding their offset from the top and left of the page. wheew... Disadvantages of a purely CSS TooltipOne disadvantage of the CSS tooltips is the syntax of your markup, related to Seach Engine Optimization. A solution could be to use just a small amount of javascript, to take the text out of the title attribute, and append it to the text inside the link (<a> tag) <script type="text/javascript"> <!-- window.onload = function() { var links = document.links || document.getElementsByTagName('a'); var n = links.length; for (var i = 0; i < n; i++) { if (links[i].title && links[i].title != '') { // add the title to anchor innerhtml links[i].innerHTML += '<span>'+links[i].title+'</span>'; links[i].title = ''; // remove the title } } } //--> </script> This allows you to use a syntax such as: I Love <a href="#" title="Cascading Style Sheets" class="tip">CSS</a> and <a href="#" title="JavaScript" class="tip">JS</a>. They allow me to create these nice hovering tips. This will show as: In addition to being more search engine friendly, it also fallbacks to the normal link with the title attribute if either CSS or JavaScript is not available on the users browser. Alternatives:link title attribute: Link This is a quote |