tool tip

Discussion in 'HTML & Website Design' started by afridy, Aug 27, 2009.

  1. #1
    hai folks,

    i want to show a tooltip exactly like this when the mouse move in my page.
    how to do it?

    http://www.milliondollarhomepage.com/

    pls note that this site also having a problem in showing the tool tip when the mouse move to the right edge. the tool tip hidden.

    tx.
     
    afridy, Aug 27, 2009 IP
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    165
    #2
    That would be the title attribute as in
    <a href="http://domain.com" [B]title="tool tip"[/B]>anchor text</a>  
    Code (markup):
     
    qazu, Aug 27, 2009 IP
  3. JamesColin

    JamesColin Prominent Member

    Messages:
    7,874
    Likes Received:
    164
    Best Answers:
    1
    Trophy Points:
    395
    Digital Goods:
    1
    #3
    you have the javascript here:
    http://www.milliondollarhomepage.com/gsc3.js

    and then in a link or any element you simply have to add:
    onmouseover="d(this)" onmouseout="e(this)" title="the text you want in the tooltip"
    Code (markup):
     
    JamesColin, Aug 27, 2009 IP
  4. afridy

    afridy Well-Known Member

    Messages:
    821
    Likes Received:
    118
    Best Answers:
    0
    Trophy Points:
    135
    #4
    tx friends, both of your post helped me to unestand the basics of tooltip.
    now i understand that unfortunately for my requirement, this title method will not work :(. coz i want to include icons/pics in the tooltip. but happy to know about a Title attribute.

    so what my next choice? using a div and position it in to the mouse cordinates ?
     
    afridy, Aug 27, 2009 IP
  5. SearchBliss

    SearchBliss Well-Known Member

    Messages:
    1,899
    Likes Received:
    70
    Best Answers:
    2
    Trophy Points:
    195
    Digital Goods:
    1
    #5
    This should work out perfectly for you. I use it for one of my sites.
    Download wz_tooltip.js here:
    http://www.walterzorn.com/tooltip/tooltip_e.htm
    Then use onmouseover="Tip('Some text')" onmouseout="UnTip()" in the mouseover.
    They don't say this, but you can add HTML to break up lines, etc. For example:
    onmouseover="Tip('Some text<br>Then a new line of text<br>Now an image <img src=myimage.jpg>')"
    You have to keep it all on one line, and beacause its javascript, you cannot use some characters like ' in words like "it's", but you can use ` in it's place (it's under the ~ on your keyboard. :D
     
    SearchBliss, Aug 27, 2009 IP
  6. JamesColin

    JamesColin Prominent Member

    Messages:
    7,874
    Likes Received:
    164
    Best Answers:
    1
    Trophy Points:
    395
    Digital Goods:
    1
    #6
    @SearchBliss have you tried to use \' instead of ' ?
    Usually that's how to pass the ' character in javascript, the \ being an espacing character.
     
    JamesColin, Aug 27, 2009 IP
  7. afridy

    afridy Well-Known Member

    Messages:
    821
    Likes Received:
    118
    Best Answers:
    0
    Trophy Points:
    135
    #7
    Yah, ill go for it :D
     
    afridy, Aug 27, 2009 IP
  8. afridy

    afridy Well-Known Member

    Messages:
    821
    Likes Received:
    118
    Best Answers:
    0
    Trophy Points:
    135
    #8
    www.sensreply.com
    tx men, i have some knowledge on escape charactors :mad:
     
    afridy, Aug 27, 2009 IP
  9. SearchBliss

    SearchBliss Well-Known Member

    Messages:
    1,899
    Likes Received:
    70
    Best Answers:
    2
    Trophy Points:
    195
    Digital Goods:
    1
    #9
    Thanks...I learn something new every day. :)
     
    SearchBliss, Aug 28, 2009 IP