Home IT Forum Web Development html & css tooltip using only css
let's talk about technology.
Learn about technologies that elevate your design and development, tools that make your job easier, and trends that you need to watch from all corners.

tooltip using only css

tooltip using only css

A friend sent me this link css tooltip, and I wanted to share it with you guys. I am not much of a graphics designer and i was struggling to create a very nice tooltip using different jquery scripts and this article gave me an insight of how it is DONE.
I will post the interesting parts here, but feel free to look into the link.

Whether you need to explain an abbreviation or acronym, to define a word or if you simply want to give additional details based on what someone hovers over, tooltips provide a simple but effective solution.

Leveraging Progressive Enhancement in Tooltips

As standards rapidly evolve and support for new techniques appear within browsers on a more consistent basis, the advances of CSS allow us to produce tooltips (which serve as a replacement for the somewhat boring browser defaults as shown in the image above) to a brand new level of detail and beauty.

If you already use a jQuery-powered example — fear not! — there are still many things JavaScript can accomplish which CSS cannot (like adding a delay on when tooltips disappear), but highlighting the ways we can use CSS to better equip our designs may inspire you to create some beautiful solutions of your own, outside of tooltips.

These are the basic steps

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>ToolTips Example</title>
</head>
<body>
<h1>Examples of CSS ToolTips!</h1>
<p>Here are some examples of a <a class="tooltip" href="#">Classic<span class="classic">This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Critical<span class="custom critical"><img src="/Critical.png" alt="Error" height="48" width="48" /><em>Critical</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Help<span class="custom help"><img src="/Help.png" alt="Help" height="48" width="48" /><em>Help</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a>, <a class="tooltip" href="#">Information<span class="custom info"><img src="/Info.png" alt="Information" height="48" width="48" /><em>Information</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a> and <a class="tooltip" href="#">Warning<span class="custom warning"><img src="/Warning.png" alt="Warning" height="48" width="48" /><em>Warning</em>This is just an example of what you can do using a CSS tooltip, feel free to get creative and produce your own!</span></a> CSS powered tooltip. This is just an example of what you can do so feel free to get creative and produce your own!</p>
</body>
</html>

Basic CSS Styles for .tooltip Class

Code:

<style type="text/css">

.tooltip {
  border-bottom: 1px dotted #000000;
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
}
.tooltip span {
  margin-left: -999em;
  position: absolute;
}
</style>

CSS for Showing the Tooltips

Code:

.tooltip:hover span {

  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover img {
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
.tooltip:hover em {
  font-family: Candara, Tahoma, Geneva, sans-serif;
  font-size: 1.2em;
  font-weight: bold;
  display: block;
  padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }

CSS for Color Scheme

Code:

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }

.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

Additional CSS for Modern Browsers
on .tooltip:hover span insert

Code:

border-radius: 5px 5px;

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);

Edited By: Intrepid
Jun-18-10 01:56:42

In the interests of clarity, it seemed necessary to constantly remind myself to pay not the slightest attention to the elegance of the presentation; I adhered conscientiously to the rule of the brilliant theoretician, Ludwig Boltzmann, to leave elegance to tailors and shoemakers. Einstein

Intrepid
Dude
useravatar
Offline
20 Posts
User info in posts
Administrator has disabled public posting

Board Info

Board Stats:
 
Total Topics:
24
Total Polls:
0
Total Posts:
13
Dormant:
User Info:
 
Total Users:
2483
Newest User:
wstvic
Members Online:
0
Guests Online:
62

Online: 
There are no members online

Forum Legend:

 Topic
 New
 Locked
 Sticky
 Active
 New/Active
 New/Locked
 New Sticky
 Locked/Active
 Active/Sticky
 Sticky/Locked
 Sticky/Active/Locked

Thank you for your donation.

Amount: