...

View Full Version : A 'definition' on hover?



BigAl75
06-21-2007, 07:11 PM
I've seen websites where when you hover over certain words on the page, a small 'definition' of the word will pop-up. I'd like to add something like that to my company's website, but not sure what the easiest way to go about it would be. I thought Wikipedia offered something similar, but couldn't find anything on their website about it. I could do it myself using either javascript or CSS, but that's the long way of doing it and my supervisor wants me to get moving on to other aspects of the website.

Anyone have any ideas or know of any websites that offer a code to use? Answers.com has a script where you can double-click on any word on the page, but it doesn't work in Opera and Firefox. I'd like one that works in all browsers.

Thanks.

whizard
06-21-2007, 07:23 PM
<abbr title="text_for_popup">text to hover over</abbr>

there's also <acronym></acronym>... semantically, <abbr> should only be used to mark up an abbreviation, and <acronym> an acronym.

HTH
Dan

bcarl314
06-21-2007, 11:39 PM
Ah, yes, but trivia question of the day...

What's the difference between an acronym and an abbreviation!

Joke of the day...

Why is abbreviation such a long word ;)

rafiki
06-22-2007, 01:08 AM
Ah, yes, but trivia question of the day...

What's the difference between an acronym and an abbreviation!

Joke of the day...

Why is abbreviation such a long word ;)

smart *** of the day...

ABBR
Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
ACRONYM
Indicates an acronym (e.g., WAC, radar, etc.).

Nightfire
06-22-2007, 02:13 AM
smart *** of the day...

ABBR
Indicates an abbreviated form (e.g., WWW, HTTP, URI, Mass., etc.).
ACRONYM
Indicates an acronym (e.g., WAC, radar, etc.).

Isn't WAC an abbreviation? ;)

rafiki
06-22-2007, 02:39 AM
i stand corrected
http://en.wikipedia.org/wiki/WAC
hmm guess i dont get the smart *** of the day :(

aparantly not actually
http://acronyms.thefreedictionary.com/Wac you can choose who the smart *** is

felgall
06-22-2007, 03:54 AM
Acronyms can be spoken as if they were actual words.

All acronyms are also abbreviations.

BigAl75
06-22-2007, 08:11 PM
I was looking for something that would stay visible until the mouse was no longer over the "link." Those above show only for a short amount of time. If I have a definition or description that is quite long, they won't be able to read it all without scrolling off then back over the word.

Something like this.

Thanks for the help.

jshl_wiz
06-24-2007, 12:40 AM
Well, what you basically want to make is a tooltip, so here is an easy, pure-CSS way of making one.

Let's suppose that you want to make the following link have a tooltip. Add the link and then a span with the description right next to it.



<a href="http://codingforums.com" class="tooltip">Coding Forums</a>
<span> Different Coding forums to answer your biggest doubts </span>


Then, use CSS to position the link relatively so that the span (description) can be positioned absolutely over it. Also make the span disappear for now:



a.tooltip {
position: relative;
}
a.tooltip span{
display: none;
}


Now you only have to add the effect when the link is hovered:



a.tooltip:hover span{
display: block;
position: absolute;
top: 1em;
left: 2em;
padding: 0.2em 0.6em;
border:1px solid #996633;
background-color:#FFF66;
color:#000
}


All the stuff in bold is just to make it look prettier, and you may change it as you like without worrying about messing up the code. However, this code only works for standard-compliant browsers such as Firefox 2.0. I wouldn't use for anything important.

Source: CSS Mastery: Advanced Web Standards Solutions

BigAl75
06-25-2007, 04:11 AM
Very cool. I'll try it out first thing I get to work Monday morning. Thanks!

BigAl75
06-25-2007, 05:20 PM
It worked, but I had to alter it to get it to display right.


<a href="http://codingforums.com" class="tooltip">Coding Forums
<span> Different Coding forums to answer your biggest doubts </span></a>

jshl_wiz
06-25-2007, 08:27 PM
Oops, that was a typo. My mistake :P. The code would have still worked by changing "a.tooltip span" to "a.tooltip + span" so many ways to get the same result.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum