Pure CSS tooltip

October 3rd, 2007

Tag:


Today I needed a tooltipsolely based on CSS solely based on CSS, because Javascript-based tooltips would have required enabling javascripting abilities for users. So here is what I did.

First, I created a little css file called tooltip.css with the following content

PLAIN TEXT
CSS:
  1. /* Usage:
  2. <a class="tooltip" href="#">SOME TEXT<span>TOOLTIP TEXT</span></a>
  4. */
  5.  
  6. a.tooltip {
  7.     border-bottom: 1px dashed brown;
  8.     text-decoration: none;
  9. }
  10.  
  11. a.tooltip:hover {
  12.     position: relative;
  13. }
  14.  
  15. a.tooltip span {
  16.     display: none;
  17. }
  18.  
  19. a.tooltip:hover span {
  20.     display: block;
  21.     min-width: 10em;
  22.     max-width: 15em;
  23.     position: absolute; top: 10px; left: 0;
  24.     /* formatting only styles */
  25.     padding: 5px; margin: 10px; z-index: 100;
  26.     background: #f0f0f0; border: 1px dotted #c0c0c0;
  27.     opacity: 0.9;
  28.     /* end formatting */;
  29. }

Then I linked this file into the html file where the tooltips should be used

PLAIN TEXT
HTML:
  1. <style type="text/css">/PATH/TO//tooltip.css</style>

Finally we use it

PLAIN TEXT
HTML:
  1. <a class="tooltip" href="#">SOME TEXT<span>TOOLTIP TEXT</span></a>

Example: Lorem ipsum dolor sit amet, consectetur adipisicing elitt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat., sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Source: CSS Tooltips - Floating HTML Elements by Gabe

del.icio.us:Pure CSS tooltip  digg:Pure CSS tooltip  blinklist:Pure CSS tooltip  reddit:Pure CSS tooltip  fark:Pure CSS tooltip  blogmarks:Pure CSS tooltip  Y!:Pure CSS tooltip

Leave a Reply