Script Perfect

         Random snips of code and bugs

Simple Tool Tips w/ Only CSS

Posted by Tim On September - 17 - 2009

Flashy unobtrusive boxes that give hints and tips to your visitors can be very helpful, informative, and improve your sign ups or sales. You can accomplish this nifty feat without any plugins or API’s weighing down your site. Of course with JQuery UI or Scriptaculous you could add some impressive eye candy and give your tool tips a more professional appeal.

Any time you require a user to click an information link or button you may be taking away from the user experience and even more possibly losing a repeat visitor. Using a tool tip is very easy and will give your visitor all of the information they need to complete a form or application without being diverted to another page or loading a pop up.


The Idea…

This is as easy as hiding and displaying a small area which contains your tool tip. All we need to do this is a few lines of CSS and our HTML for the tool:

CSS

a.tip:hover span {
      display: inline;
      position: absolute;
      border: 1px solid #111;
      background: #ccc;
      padding: 5px;
      margin-left: 10px;
}
a.tip span {
      display: none;
}
a:hover {
      background: #ccc;
}

/*The background for a:hover is a requirement for IE*/

Now all we need to do is create our page where we want our tool tip:
HTML

<a href="#" class="tip">ToolTip Demo<span>Here is our tooltip text</span></a>

Easy as that! Want to see it in action? Move you mouse over the ToolTip DemoHere is our tooltip text then!

Anything you place within your SPAN tags in the A tag with a class of “tip” will generate your tool tip.

[del.icio.us] [Digg] [dzone] [Facebook] [Furl] [Google] [LinkedIn] [MySpace] [Newsvine] [Propeller] [Reddit] [Slashdot] [Spurl] [StumbleUpon] [Technorati] [Twitter] [Email] More »
CSS

One Response to “Simple Tool Tips w/ Only CSS”

  1. BILL says:
    July 21, 2010 at 4:27 pm


    MedicamentSpot.com. Canadian Health&Care.No prescription online pharmacy.Best quality drugs.Special Internet Prices. Low price drugs. Buy pills online…

    Buy:Prevacid.Accutane.Arimidex.Lumigan.Actos.100% Pure Okinawan Coral Calcium.Retin-A.Valtrex.Zovirax.Synthroid.Mega Hoodia.Zyban.Human Growth Hormone.Nexium.Petcam (Metacam) Oral Suspension.Prednisolone….

Leave a Reply

Spam protection by WP Captcha-Free

About Me

I am an independent web developer and webmaster of many sites. The main goal of Script Perfect is to provide answers to some of the hard to find questions when it comes to website design and coding.

Twitter

    Tags