13dots - SwishMax And Photoshop Tutorials

Step 1: The HTML

Set up your tooltip example.
For this we will type the word which we want to tooltip to appear on when hovered. Then surround it with a span with the class tiptext.

Example

Now anywhere within the "tiptext" span place another span with the class tooltip, within that type the text which should appear on your tooltip.

ExampleThis is the tooltip

Step 2: The CSS

.tiptext {
    border-top-width: 1px;
    border-top-style: dotted;
    border-top-color: #999999;
    position: relative;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}
span.tiptext:hover span.tooltip {
    background-color: #FFFFF2;
    display: block;
    position: absolute;
    padding: 3px;
    top: 1em;
    border-top: 1px solid #999999;
    border-right: 2px solid #999999;
    border-bottom: 2px solid #999999;
    border-left: 1px solid #999999;
    left: 1em;
    width: 15em;
}
span.tooltip {
    display: none;
}
.tiptext:hover {
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: #999999;
    position: relative;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
}

This CSS styles a very simple tooltip but here's the most important parts:

(tiptext)

position: relative

This is neccesary otherwise your tooltip will appear on the top-left corner of the screen.

span.tiptext:hover span.tooltip

This basically says when the span which is classed as tiptext is hovered then style the span which is styled as tooltip like so...

(span.tiptext:hover span.tooltip)

display: block;
position: absolute;
top: 1em;
left: 1em;

You must position the span as absolute or else the span will fall to the next line and take up all the space available on the line.
The top and left is how far from the top and left the span must be positioned.

Everything in .tiptext:hover is just styling on the tiptext when you hover over it.

Please note: for this to work in IE you must change your tiptext to a link (replace with and span.tiptext with a.tiptext in the CSS)

This tutorial has been written for 13dots.com by Ludwig Wendzich (alias.infnit/InFnit) and is copyright 2006-. You may not copy or redistribute this tutorial without permission from 13dots.com however you may link to it.

Site Map

Home
Forum
Tutorials
  -Photoshop
  -Swishmax
  -Image Ready
  -Php
  -Paintshop Pro
  -Articles
  -Illustrator
  -Css
  -Javascript
  -Cinema 4D
Files
Shop
Topsites
Gallery
Blogs
Team
Privacy
Contact

The Art And Science Of CSS

“The who’s who of the Web share their CSS design secrets!”

This book will show you how to:

Break out of the square box cliche
Make your backgrounds sparkle
Design headings that stand out
Create amazing navigation menus
And do it all with cross browser-compatible markup
The answers to these questions and more are in this book.

Read FREE Sample Chapters

Ready To Use Templates

Life Insurance | Life Insurance | Lil Wayne | Calorimeter Homogenizer Hot PLate | Package Holidays