SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Guru
    Join Date
    Nov 2000
    Posts
    740
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating little popups

    I want to hover over a link and have it popup a little window with some help information, all without the user having to click the link.

    Are these little scripts done in javascript? Any suggestions on where I can find a free one?

    Thanks,

    Jon

  2. #2
    Non-Member thewebhostingdir's Avatar
    Join Date
    Oct 2005
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you are looking for the tooltip. It is possible using javasript/DHTML. Refer http://www.dynamicdrive.com/dynamici...tmltooltip.htm

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Or use the title attribute if it is just a line or two of text.

  4. #4
    SitePoint Wizard silver trophybronze trophy Nadia P's Avatar
    Join Date
    Oct 2004
    Location
    NSW Australia
    Posts
    3,564
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The title attribute as Dr John mentioned for something simple
    Code:
    <a href="#" title="A small description can go here. A small description can go here">eros sapien nec sapien</a>
    or these two tooltips come highly recommended:

    http://boxover.swazz.org/example.html

    http://www.walterzorn.com/tooltip/tooltip_e.htm




  5. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    I would embed a tag within the anchor, use absolute positioning on the hover class, that way you can make it appear where you want, no JavaScript, no fuss

  6. #6
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using JQuery I recommend this plugin:

    http://www.lullabot.com/articles/ann...tooltip-plugin

    It has lots of configuration options, you can also use ajax to populate tooltips.

  7. #7
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AlexDawson View Post
    I would embed a tag within the anchor, use absolute positioning on the hover class, that way you can make it appear where you want, no JavaScript, no fuss
    Which wouldn't work in all browsers.

    At least JavaScript will work in all browsers unless you disable it. And users that disable JavaScript should expect to loose quite a bit of user friendliness on modern websites anyways so tooltips won't worry them.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Which wouldn't work in all browsers.
    Who? Lynx? Lynx doesn't count. : )

    CSS tooltips work in all browsers who support CSS, and since Alex said put the tag in an anchor that means even IE6 will work.

    Opera has a bug with inline text having a CSS tooltip, or at least had one... might be fixed by now, I haven' checked. Even so, they generally work even then.

    Many of us make extensive use of CSS tooltips. To the OP's question, I had a form which originally had Javascript-run "help text". Guess what the user didn't see if they didn't have Javascript? Yeah, it was poorly-written, and you can make it more accessible than we had it even with JS, but now we have JS-free help text, which appear both with :hover and :focus so keyboarders don't miss out. (example, 'scuse the targets as that was to take care of a lack of sessions while preserving cache-less forms) However it does sound strange and wordy-super-verbose in a screen reader : (

  9. #9
    SitePoint Addict Iceman90's Avatar
    Join Date
    Mar 2006
    Location
    Calgary, Alberta, Canada
    Posts
    391
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually use the WZ Tooltip script: http://www.walterzorn.com/tooltip/tooltip_e.htm

  10. #10
    SitePoint Addict fattyjules's Avatar
    Join Date
    Dec 2005
    Posts
    295
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by risoknop View Post
    Which wouldn't work in all browsers.
    Just checked it in latest(ish) versions of Firefox, Opera, Chrome and Safari, and IE6, IE7 and IE8. Hover over a <p> or <a> element with a title attribute, and the tooltip appears. Don't know about other elements though.

  11. #11
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    The title attribute appearing is different than using a CSS tooltip as Alex described, though. However, so long as the hovered element is an anchor, the nested tag who was absolutely-positioned off-screen can come onscreen in all used browsers who support CSS. Konqueror can be a little funny sometimes, Opera had a bug where scrolling when the tooltip was on an inline element died horrible deaths, and of course IE6 requires the hovered element to be an anchor.

    Those arguments aside, it's a solid technique and it works, even for those who choose not to let someone's strange scripts run on their browsers : )

  12. #12
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yep, I don't see what the problem is, the method I posted works across all browsers and because it's nested within an anchor it will function perfectly happily in IE6. All it is doing is pulling the tooltip from the anchor (through absolute positioning) and when hover is invoked it is displayed in the correct position (when hover isn't in effect, it is hidden from view using CSS display or visibility properties)

  13. #13
    SitePoint Guru risoknop's Avatar
    Join Date
    Feb 2008
    Location
    end($world)
    Posts
    834
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not a CSS expert such as Stomme_poes or Alex so I take my words back.

    But I am pretty sure that when I tried implementing tooltips only with CSS few months ago on one of my websites I couldn't get them to work in Opera and also IE6, so I just went with JavaScript.

  14. #14
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Did you apply the hover element to an anchor or to another element? Because anything other than an anchor has compatibility issues across browsers, which is one of the problems we face with dropdown CSS menus in general

  15. #15
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found a javascript option that worked well for me. Check out
    bosrup.com/web/overlib/

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    There are lots of reasons an attempt can be buggy. Simplifying it to its basics seems to help (tho why are mine always complicated?? Oh yeah, IE and I was doing it inside forms, sux).

    theoretical (from another forum)
    <a href="#"><img src="foo" alt=""><span>Yo I B t3h l33t t00ltip</span></a>
    a {
    position: relative;
    }

    a span {
    pos: abso;
    good idea to set height and width as abso-pos shrink-wrap;
    left: -bazillion units (watch out for Opera grrr);
    }

    a:hover span, a:focus span {
    left: 0 or whatever;
    }

    Using margin-left instead of left in some situations seems to calm IE's buggy nerves.

  17. #17
    SitePoint Member
    Join Date
    Sep 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just installed gnome 2.26 and im pretty damn happy with it, but theres one thing that annoys the crap out of me. every time you roll the mouse over something, a little popup box comes up and gives you a description of what you rolled over... what to do with it, etc.
    is there any way to get rid of these things?

  18. #18
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    Nah, if it happens in Gnome, that's nothing to do with a web page. That's Gnome's own tooltips. I suppose there's a way to disable them but that would have to be somewhere in your Gnome settings. You'll have to look at Gnome Help.


Bookmarks

Posting Permissions

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