Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    A 'definition' on hover?

    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.

  • #2
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts
    <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
    Last edited by whizard; 06-21-2007 at 06:25 PM.
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #3
    Mega-ultimate member
    Join Date
    Jun 2002
    Location
    Winona, MN - The land of 10,000 lakes
    Posts
    1,855
    Thanks
    1
    Thanked 45 Times in 42 Posts
    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

  • #4
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    Quote Originally Posted by bcarl314 View Post
    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.).

  • #5
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,265
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Quote Originally Posted by rafiki View Post
    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?

  • #6
    Senior Coder rafiki's Avatar
    Join Date
    Aug 2006
    Location
    Floating around somewhere...
    Posts
    2,043
    Thanks
    19
    Thanked 42 Times in 42 Posts
    i stand corrected
    http://en.wikipedia.org/wiki/WAC
    hmm guess i dont get the smart *** of the day
    Edit:
    aparantly not actually
    http://acronyms.thefreedictionary.com/Wac you can choose who the smart *** is

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Acronyms can be spoken as if they were actual words.

    All acronyms are also abbreviations.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Thumbnails Attached Thumbnails A 'definition' on hover?-hand.jpg  
    Last edited by BigAl75; 06-22-2007 at 07:23 PM.

  • #9
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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:

    Code:
    a.tooltip {
        position: relative;
    }
    a.tooltip span{
        display: none;
    }
    Now you only have to add the effect when the link is hovered:

    Code:
    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

  • #10
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Very cool. I'll try it out first thing I get to work Monday morning. Thanks!

  • #11
    New Coder
    Join Date
    Mar 2006
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It worked, but I had to alter it to get it to display right.

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

  • #12
    New Coder
    Join Date
    May 2005
    Location
    Alabama
    Posts
    49
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •