Subscribe to
Posts
Comments
NSLog(); Header Image

Fun with CSS: Link ToolTips

Nice titles is a nifty little "trick" to override the tooltips you sometimes see in browsers with "title" attributes. Thanks to Brad Lauster I've got them (kinda) working in Safari. David Hyatt indicates that they will work in Safari shortly as found at Brad Choate's site.

I originally became interested from inluminent, which links to an article noting my previous problem with weblogs.com timing out.

I've used a transparent PNG as the background image, to get the transparency, but Safari messes up the position of the "tooltip" when you scroll the page. This continues to work in Navigator with the current setup. We'll see what the future holds on this one - I certainly like it - though if Safari supported the little yellow actual "tooltips" I'd be inclined to just ditch this whole "Nice Titles" thing.

11 Responses to "Fun with CSS: Link ToolTips"

  1. Hm, the implementation you are using gets a bit buggy if you scroll the page down a bit. Everything is way off. But if the next build of Safari handles it better, then it's all good 🙂

  2. Yeah, as I say with "Safari messes up the position of the "tooltip" when you scroll the page". 😛

  3. “though if Safari supported the little yellow actual "tooltips" I'd be inclined to just ditch this whole "Nice Titles" thing.”

    Eh... Safari puts the title text into the footer instead of into a tooltip. True, there's not as visceral a connection between the link and it's associated information, but it _is_ there in the format Go to"TitleText"

    As far as I can tell, the Nice Titles trick breaks Safari's display of the title text in the footer.

  4. It does "break" it because the javascript removes the title, effectively, from the link. I'm aware that the title shows up down there in the status area, but I don't like it down there. It clutters the window and moves the URL to an unpredictable location.

  5. Nice Titles

    I have implemented Nice titles. Nice titles is a cute hack by Stuart Landgridge. It replaces the title attritbute within links with a transparent png. It is the newest, greatest thing and all the coolest bloggers are using it :wink:. In reality, it doe...

  6. Says Hyatt in a flurry of posts (two today!): The first issue is Safari's limited support for the title attribute. We're going to dump our...

  7. cool. thx!

  8. Nice Title

    I came across this cool mouse_over trick and decided to put it up on my blog too....

  9. The tooltips look great in Mozilla. Good job!

    O:-)

  10. Is there any way that nicetitles can be used over images too? I notices problem with the end of the page and nice titles there too.

  11. I think the best .css tool is the Adobe Dreamweaver. Another one is the FireBug add on of Firefox browser. Thank you for suggestion !