Sweeter Titles: Oh yea
I am finally satisfied. I believe most of the requests have been fulfilled and this is a much more lean script than before. Here is the change log if you’re interested:
- Added support for
[abbr]and[acronym]elements.[abbr]does not work in Internet Explorer as expected - Added accesskey support for
[a]elements. It will be shown next to the URL in [square brackets]. - No more findPosXY.js file. Tooltips are displayed by mouse position and not anchor position like a true tooltip should.
- Tooltips no longer get displayed offscreen when they are positioned near the right hand side of the screen or the bottom of the screen.
- quick access array to add custom elements.
See the Sweet Titles demo page has been added to the site which is also included in the download package.
Credit for this release goes to:
- Gabe B for his willingness to debug the mouse coordinate issue
- Jim Auldridge for vigorous testing and advice on implementation
- and Paul Davey for his encouragement to get things right and remove the bugginess
October 27th, 2005 at 4:08 pm
[...] Tue 30 Aug 2005 Introducing: Sweet Titles Updated:// 2005-10-27 Drastic changes have been made to Sweet Titles No. It’s not a knock-of [...]
October 27th, 2005 at 5:15 pm
Wow! I got some credit in a Dustin Diaz post! Thanks bud! Glad to see the more enhanced version already up!
Jim
October 28th, 2005 at 7:28 am
Awesome :)
That was quick uploading. Nice credit.
October 28th, 2005 at 4:44 pm
[...]
Sweet-Titles Updated
Dustin Diaz has updated his Sweet Titles on Sweet-Titles Updated. nice script to blow up your title-tags.
This entry wa [...]
October 28th, 2005 at 6:03 pm
hi dustin, i’ve added two small enhancement for your script:
- using arrays instead of defining every element we want to walk through
- fixed the script to dont build sweet-titles, when no title tag is on a “a”-tag
put a link to the modified file at:
http://www.tonitone.com/javascript/sweet-titles-updated/
maybe its usefull for your next release.
bye
October 28th, 2005 at 6:14 pm
Hi Toni.
2 things:
I like how you built the elements into an array. Code rewriting in general is bad. So I might take you up on that offer.
Elements without a title I’m not so sure I want to take it out because folks might still have an accesskey or they will still want the stylistic purposes of the toolTip itself without displaying the text in the title attribute (such as the href).
Thanks a lot for taking a look at the update Toni. Hopefully others will follow your lead.
October 29th, 2005 at 1:29 am
I’ve got this installed in a WordPress blog, with the [script] markers at the top of my index.php file. It works fine on the front and subsequent pages, but when viewing an archive, search, or single entry, it doesn’t. Is there something I should do? Here’s the url where I’m testing this (and the problem is): http://centripetalnotion.com/test.
October 29th, 2005 at 5:08 am
Hi Dustin - nice update to the script :)
One thing I noticed is that the script will always display tooltips above the item in question if you’re below the first “page” worth of content in the viewport, so I created a version which uses the total width/height of the page and examines the scroll offsets to determine where to show the tooltip. I’ve tested this in strict and quirks mode in IE 6, Firefox 1.0.7 and Opera 8.5, and it seems to work ok.
http://insin.woaf.net/scripts/lib/src/prototip.js
Dimension and scroll offset code was taken from PPK’s page here:
http://www.quirksmode.org/viewport/compatibility.html
The only other issue I can see with the script is the occasional scrollbar flicker in Firefox when displaying tooltips, due to the way the tooltip has to be inserted into the page so its size can be determined before it is positioned. Perhaps there’s a workaround for this, too.
October 29th, 2005 at 10:21 am
@Justin:
I’m not sure if I can be too responsible for the result, but here’s what I came up with.
First thing’s first. Toni might want to look into this since you’re using his modified script.
Second thing, I can possibly see some quirkiness when you’re including the script files above the doctype. They should in fact go in the <head>.
@Jonathan: I think you’re right… somewhere along the lines I miscalculated the document height. Thanks posting a resource I can use.
October 29th, 2005 at 11:14 am
How can I stop the scrollbar flicker?
October 29th, 2005 at 11:16 am
I haven’t ran into a flicker. Anyone else?
October 29th, 2005 at 1:40 pm
Scratch that. i finally see what you’re talking about. Ug. I dunno yet. I thought that was taken care of… I must have missed it during testing.
October 29th, 2005 at 2:39 pm
Alright, I updated the release. This should be pretty stable from here on out. The flicker is caused by the repositioning of the toolTip… one suggestion to fix this was to set the display property to ‘none’… however you’re then unable to check against the offsetWidth and offsetHeight of the toolTip which is more of a problem so I’ve left it where it stands.
I did add in the array, only slightly different. The array is accessed through a direct property of the main object instead of just an array inside the constructor method. From the way I see it, the array was a good idea because it allows the developer to add or subtract custom elements at will. Plus, you will be able to access the array through any other method of the object.
October 30th, 2005 at 1:46 pm
Adding a
top: 0;rule to the CSS rules for thebody div#toolTipselector seems to do the trick re: stopping the scrollbar flicker, as the initial position of the tooltip won’t affect the document’s total height any more.October 30th, 2005 at 7:28 pm
Jonathan, you’re a life saver. luckily it was just a simple rule added to the CSS. I’ll put that in the next release. After that, I really can’t think of much else to improve this…and nor do I want to. If we add any more features, it would lose it’s ‘lightweightness’ feature.
December 10th, 2005 at 7:38 pm
I agree this is an awesome mod. You have it made it very lightweight and flexiable, unfortunately it lacked the two features I wanted most.
1) Follow cursor according to x,y positioning
2) Ability to attach to any element not using a title tag but possibly onMousOver (to comply with web standards).
Maybe I will revist your script and will make the modifications I want myself. Still awesome script in my eyes :)
December 11th, 2005 at 2:06 am
@Jason: You mentioned to remove the title and stick in the onMouseOver eventHandler…and being more standards compliant?
Well, I suppose the whole excercise here was that we’re modifying the title and enhancing the user-experience, but not letting those without JavaScript suffer from something less accessible. I would definitely recommend against an inline eventHandler, but that’s just me.
As for the following the cursor… I wanted the script to behave more like a real toolTip, just with the added effects. Thus if the toolTip followed your mouse around, that could get a little annoying.
January 10th, 2006 at 3:28 pm
Anyone got any ideas here? I have sweet titles on a page, which also has an Adx popout menu. The two are conflicting.
In IE6, the menu flickers on hover, as the cursor enters or leaves the 1 pixel borders of each item:
http://ied.gospelcom.net/menusweettitle.php
toolTipLib.js is conflicting with the htc file that the menu needs for IE6.
Without the sweet titles javacsript file, it works normally:
http://ied.gospelcom.net/menunosweettitle.php
This still happens even though Sweet Titles is not looking at links without titles, and even, indeed, even if I disable it from creating titles from A links at all.
Is there any way of shielding the menu from this effect?
The flicker only happens as the cursor enters, or leaves, the 1px borders of each item in tthe ever-fragrant IE6. Firefox has not problems.
A second tiny issue is the acronym. On the page with the tooltips script, toolTipLib.js is causing for some reason the dotted underline to the acronym to disappear as soon as the script has loaded. This happens with both my version of toolTipLib.js and also the exact one used on the sweet titles page. Any idea why this is, or how to fix it?
March 17th, 2006 at 10:35 am
hello !
great script !
i’ve a question :
i’ve desactivated the display of the url in the tooltip (comments out 5 lines in sweetTitles.js, near line 76)
works fine like this.
i can see only title’s attribut :)
but, if title’s attribut is not defined, an empty tooltip is displayed.
anyone know how to hide this empty tooltip ?
i hope you understand my question !
thanks in advance !
March 18th, 2006 at 4:28 am
Ok, i’v found it :)
In sweetTitles.js, i’ve modified this line
//this.tip.innerHTML = “”+anch.getAttribute(’tip’)+”“+access+addy+”“;
to
this.tip.innerHTML = “”+anch.getAttribute(’tip’)+”";
To hide ulr in tooltip.
And i’ve replaced this code :
this.tip.style.visibility = ‘visible’;
this.tip.style.opacity = ‘.1′;
this.tipFade(10);
by this one :
if (anch.getAttribute(’tip’) == “”)
{
this.tip.style.visibility = ‘hidden’;
}
else {
this.tip.style.visibility = ‘visible’;
this.tip.style.opacity = ‘.1′;
this.tipFade(10);
}
Thus, i can see inside tooltip, only title’s attribut.
and if there’s no title’s attribut specified, i’ve no tooltip visible :)
good for me !
bye !
March 18th, 2006 at 4:30 am
modification
//this.tip.innerHTML = “”+anch.getAttribute(’tip’)+”“+access+addy+”“;
to
this.tip.innerHTML = “”+anch.getAttribute(’tip’)+”";
Without space in ‘P’ tags
December 17th, 2006 at 3:35 pm
I want to thank Blueteen for providing this solution to the great script and of course Dustin.
September 20th, 2007 at 7:11 am
This is real cool, but it’s a bit annoying that ALL links (and [abbr], [acronym]) gets these posh tittles. Can this be done by class?
examp: link
but link
that would make the sweet titles even sweeter.
October 18th, 2007 at 5:11 am
The million dollar question I guess. Can this (great) script include something to force the [abbr] to work in IE?
Would then be gold!