Nice titles
Another issuance from Stu’s House of JavaScript Weirdness: nice titles on links, a la Nate’s wish over at web-graphics.
Updates: The background of the nicetitle is now a transparent PNG (as explained by Lars Dieckow), so transparency relies on your browser’s support for such PNGs rather than proprietary opacity methods. The effect now works on keyboard navigation (tabbing to links) as suggested by Mark. There are now no longer rounded corners on the div, whether you’re in Mozilla or not, because Mozilla’s -moz-border-radius property doesn’t seem to work on the div any more (must be the background image). Cross-browser rounded corners seem to require inline images and nested divs, and I can’t think of a way of making the rounded corners transparent rather than white — if they just have a transparent background then they’ll show the main div’s background, which is our semi-transparent PNG, even though they should show the page below it. There is still no delay on the links, because delays are a pain; if you mouse off a link before the delay has occurred, then the remove function has to know to not try and remove, but more importantly, if you mouse from one link directly to another, sometimes the onmouseover for the second link fires before the onmouseout for the first link, which confuses nicetitle’s poor little brain. Further thought needed on how to handle that case. I also don’t understand why the div is sometimes cropped on the right under Mozilla/Linux. There’s no reason for it to be; I need to cut that down to a testcase and file it as a bug. Thanks for all the comments and enhancement requests, all.
None
Thanks for the tip. I’m glad to have it working now!
2 hours later
If you command click a link (to open it in a new window or tab), the Nice Title still appears and will never disappear.
2 hours later
Mr. eel – looks like fixing for keyboard navigation breaks the positioning in some cases. if the link is nested in a table or a div, offsetLeft & offsetTop are measured from the top left of the parent table cell or div, but the nicetitle is positioned relative to the top left of the browser window using these numbers. uncommenting the xy= and mx= lines to call getMouseposition again will fix this, but breaks the keyboard nav – using tab to cycle through links will still position the nicetitle relative to the cursor.
2 hours later
I’ve also discovered a problem with the script in IE 5.5. The tool tip always appears near the top of the page on the left, regardless of where the cursor is. I think this may have something to do with the links being nested in a DIV. It’s taking it’s cordinates from the top left of the div, rather than from the cursor? Maybe :7)
2 hours later
Really odd effect on the IE6 scrolling bug – swallow your pride, start IE, go to philringnalda.com, find that the scrolling bug (which I had fixed) is back, hit F11 twice to clear it, scroll down to the bottom of the page and then mouseover a titled link: the scrolling bug reasserts itself by jerking you back up to the bottom of the sidebar. Bleah. Where the hell is IE7?
2 hours later
It doesn’t appear to work in an XHTML 1.0 Strict document served as application/xhtml+xml to Mozilla. It would be nice if it did.
2 hours later
This is an excellent bit of javascript. Not just pretty, but very useful. I think I’ll be using it in many of my web projects to come.Just one suggestion. Would it be possible to extend this script so that it creates styled tooltips for ABBR and ACROYNM tags as well? It would be especially cool to be able to style each type differently so as too differentiate them.Perhaps also with the option of inserting text into the start of each tooltip. For example ACROYNM tool tips could be prefaced with the statement “This is an acronymn for“.Anyhow, thank you very much for this lovely script.
2 hours later
It seems to be a bug with tabs in Mozilla. When you switch to a different tab after a nice title has been shown, all links with titles in the other page display the last nice title shown in the first page.
2 hours later
Very nice. But i found a “bug” I think. When you right click (as in save target as) the nice title div will pop-up but will not disapear anymore, unless you reload the page in whole.But overall it looks smooth.
2 hours later
Little bitty bug: when checking whether you need to walk up to a parent node, you need to check for something along the lines of (lnk.nodeType == 3 || lnk.tagName.toLowerCase() != “a“), so that a titled link on an image (see your GeoURL link) doesn’t just throw an error.
2 hours later
sigh IE’s opinion of what offsetTop is differs from Mozilla’s. I hate web browsers. Should be (sort of) fixed, or at least improved, now.
2 hours later
They’re suddenly not working as smoothly in IE6/Win. Is it because you’re working on that delay? ;)
2 hours later
That delay would be cool. So would an option to trim gratuitously long URLs. So would a script to automatically re-title all of my links (I’ve linked this post to my musings in my blog), but that’s my problem. :)
2 hours later
Excellent work, Stuart. One request: any way you can delay their appearance by about 1 second, so they work more like most tooltips do? I’m afraid their instant appearance might throw some people off.
2 hours later
Could we add the appropriate events so that the nice title also pops up when tabbing through links?
2 hours later
Next trick – how do we make the transparent png stretch? I guess if the corners are forsaken, stretching wouldn’t be nessesary.
2 hours later
How to make a transparent PNG image in PSP and the GIMP:
PS: In Mozilla/Linux the Nice titles don’t look so nice anymore: the lower part is often cut off and hides the URI.PPS: Please fix the Javascript so that it works with Opera7.
2 hours later
Greetings from Malaga (Spain). Antonio :-)
110 weeks later
Would it be possible for the nicetitle.js to display accordingly image alt tags?
136 weeks later
Hi, I work at a university am trying to implement your nice titles to work as a footnote rollover for a website I’m building. Currently, it will apply the nice titles for all links on a page. Is there an easy way to just apply the nice titles to the “sup” (superscript) tag?
138 weeks later
Cristina: you’d have to hack the script to not process document.links or ins tags and instead process sup tags only. It’s certainly possible, but you’d need a little JavaScript knowledge to do it. Drop me an email if you’d like to know more.
138 weeks later
Great I liked it. But for IE 6 it does not look good. If I have nice titles above dropdown list box, then the tool tip/nice title goes under the drop down box.
Any idea??
191 weeks later