I would love to be able to make it so that by mousing over a character
in a web page (using any compliant browser NOT just IE)
(such as a footnote number), a line or two of text would appear.  I'm
sure I could eventually figure this out since I have seen similar
things pop up on sites like amazon.com when you mouseover an image.

Can this be done with CSS alone?  If so, what would the code look like
(I don't need every line perfect, but the more you give me the better
so I know where I would be going with this)

Example:

Here is a citation (1)   

When the viewer mouses over the (1) then a little box would appear
floating over the text saying

Henry Smith "My book name" (London: Publisher, 1999), 55.

In the original HTML for this, I would ideally like to put the
footnote text into a "span" or "div" or some such, so that the CSS
could grab the text in the tag for display in the floating box over
the text.

I would like to minimize any use of Javascript (can't this be done
with CSS alone?) as I will be imbedding this into a blog
application...but if it can only be done with Javascript.

I will be releasing the eventual code as open source, with any
modifications I saw fit...

I'm on a brand new computer, and have yet to install all the default
browsers I use when I design a webpage or site. This may be of
interest :

Alert Box using CSS
http://www.stunicholls.myby.co.uk/menu/alert.html

From looking at the comments on the site - it seems there is trouble
displaying it in FireFox and Netscape.

I'll be installing the other browsers tomorrow to fiddle with this
freely availabe code. I'm posting this as a comment because another
researcher may already have some working code and the ability to check
it against all the major browsers.

-SgtCory

I've used overLib http://www.macridesweb.com/oltest/. But this, like
the other, is javascript. If you want CSS, one very silly thing you
can do is make a hover style that brings up an image, such as
http://wellstyled.com/css-nopreload-rollovers.html but of course you'd
have to have a blank image and put your citations in an individual
image per link in the rollover image. If you want to do that much
work, then it will do exactly css only.

Free comment.

Oops, I said "the other is javascript" and ... I made a mistake. Sorry
about that. sgtcory-ga's suggestion is truly CSS only. Apologies all
around.

Hmm...I'll take a look at the links you provided and the code they
use.  Thanks for passing them on.

I like the first CSS only pop up link I was sent  but do I need to
fiddle with sizes for the resulting floating box? I was hoping that
this would be a "one size fits all" solution for displaying footnotes
of various lengths in various browsers.  Would this work?  Did you say
there were browser issues?

Sorry to add another comment.  The Javascript example does also indeed
work, in fact:

http://www.macridesweb.com/oltest/WRAP.html

has examples of simple footnote-like texts appearing on mouse-over....

The question is still though, can this be done all within a CSS class
like that first example without having to assign box size for all
examples?

Don't forget you can add <a href="#" title="Reference: Book, Chapter,
page">1</a> for tooltips on most new browsers. It's neither CSS nor
Javascript, but I thought I would bring it up for no other reason than
I just used it to solve an issue where the overhead seemed to be
easier than either CSS or Javascript.

:) :) 

Yes, not so much fun, but possibly more cross-browser compatible. Who
knows? On another purely academic thing, I'm definitely bookmarking
this question.

Thanks everyone.  I found my answer here:

http://blog.codefront.net/archives/2004/01/22/tooltips-with-css

Great! I had an out of town trip shortly after posting the first
comment. I'm glad you found your answer!

- SgtCory