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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Mar 2004
    Location
    Sthlm
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ALT function on text

    Hi!

    I know that I have seen a code in CSS or PHP that makes a yellow window appear when you hover a text with your mouse. Just like when you hover over an image with an "ALT" function.

    Please help me! What's the got damn code that i have forgotten?!

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    Canada
    Posts
    253
    Thanks
    0
    Thanked 0 Times in 0 Posts
    perhaps adding this to your link tag?

    title="my text here"

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Example page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html>
    <head>
    <title>Test</title>
    </head>
    <body>
    <p>This part will not have anything appearing when your mouse is
    over, <span title="This is what you mean, don't you">this
    does</span>, so that is that.</p>
    </body>
    </html>
    I didn't know you could do that to text, but now I do, so I've learn't something as well.

  • #4
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    If you go to http://f1unleashed.geoffers.uni.cc/drivers.php and put your mouse over Michael Schumacher (the others don't work, yet) then you will see an example on my site, to put more than one line in you put something like this
    Code:
    <span title="Age: 35
    Nationality: German
    GP starts: 194
    GP wins: 70
    GP points: 1038">Michael Schumacher</span>

  • #5
    Senior Coder missing-score's Avatar
    Join Date
    Jan 2003
    Location
    UK
    Posts
    2,194
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works in internet explorer, but in mozilla you just get  characters for the return spaces, and it places them on one line.

  • #6
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    It works in Apple Safari (the only browser I tested it in) and I see what you mean in FireFox.

  • #7
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I was browsing the internet the other day and I found an article about this very subject, let me see if I can find it again.

  • #8
    New to the CF scene
    Join Date
    Mar 2004
    Location
    Sthlm
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks!

    Thanks everyone!!! I found out, like one hour after posting this message that you could write (as Error writes) title="something" and it works well (in Internet Explorer, haven't tried it in the other browsers, but apparently it doesn't work in all browsers)

    Thanks anyway!!!

  • #9
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    I can say that it works in IE5.2 Mac, Apple Safari, FireFox (but only a single line).

  • #10
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Since the required information for "tooltip" is multiline I would approach it differently:
    Code:
    <style type="text/css">
    
    .hasinfo div
      { display: none;
        position: absolute;
        margin: 0px 0px 0px 0px; /*Use margin to position 
                        the "tooltip" relative to
                         parent element*/
      }
    
    .hasinfo:hover div
      { display: block;
      }
    </style>
    
    <span class="hasinfo">Text to hover over
       <div>This info will pop up. <br />
                Can have pretty much any HTML formating here
       </div>
    </span>
    See this for the way to make it work in dumb IE.

    __________

    If you do like using title attribute, but would like to have the ability to change its presentation, consider this:
    www.klproductions.com/kltooltips.html
    Last edited by Vladdy; 03-08-2004 at 10:51 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #11
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Originally posted by Vladdy
    Since the required information for "tooltip" is multiline I would approach it differently:
    Code:
    <style type="text/css">
    
    .hasinfo div
      { display: none;
        position: absolute;
        margin: 0px 0px 0px 0px; /*Use margin to position 
                        the "tooltip" relative to
                         parent element*/
      }
    
    .hasinfo:hover div
      { display: block;
      }
    </style>
    
    <span class="hasinfo">Text to hover over
       <div>This info will pop up. <br />
                Can have pretty much any HTML formating here
       </div>
    </span>
    See this for the way to make it work in dumb IE.

    __________

    If you do like using title attribute, but would like to have the ability to change its presentation, consider this:
    www.klproductions.com/kltooltips.html

    You've lost me, what is suppost to be in the box and what the text where you put your mouse over to see it.

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is a demo that uses <li> for hover action: http://www.vladdy.net/Demos/SuppInfoPopUp.html
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #13
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Originally posted by Vladdy
    Here is a demo that uses <li> for hover action: http://www.vladdy.net/Demos/SuppInfoPopUp.html
    I'll have to work out how those work at the weekend (got school monday to friday, only don't have homework on wednesday, on which I go to cinema).

  • #14
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts
    Quote Originally Posted by Vladdy
    Here is a demo that uses <li> for hover action: http://www.vladdy.net/Demos/SuppInfoPopUp.html
    Could you turn that into spans for me plz, cos I don't fully understand the code...


    Forget it, I just worked it out!!!

  • #15
    me'
    me' is offline
    Senior Coder
    Join Date
    Nov 2002
    Location
    Warwickshire, England
    Posts
    1,229
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Surely a definition list would be a better semantic markup of that problem?
    Code:
    <dl>
      <dt>Hello World</dt>
      <dd>Tooltip goes here</dd>
    </dl>
    David House - Perfect is achieved, not when there is nothing left to add, but when there is nothing left to take away. (Antoine de St. Exupery).
    W3Schools | XHTML Validator | CSS Validator | Colours | Typography | HTML&CSS FAQ | Go get Mozilla Now | I blog!


  •  

    Posting Permissions

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