Sweet Titles Finalized

Thursday, February 2nd, 2006

I’ve been meaning to get to this for quite some time… so without further waiting…

Introducing Sweet Titles 1.0 Final

In this final release I have changed the file names to give it a fresh start. It remains having only three files:

sweetTitles.css
addEvent.js
sweetTitles.js

The change log is included in the read-me.txt file, but for the sake of making this post worth while, I’ll let you know what I’ve done anyway.

Sweet Titles got sexier

No longer is a new object created upon each instance of the ‘mouseover’ event, and then removed upon ‘mouseout’ - it simply reuses the same toolTip and moves stealth like throughout the page.

The code is a bit more elegant than it was taking full advantage of the this keyword where necessary. Plus the hard-coded allowable elements has been removed… you can now use it on pretty much any element you want with a title attribute (please use with caution (I’ll just stick with the standard 'a','acronym', and 'abbr' tags)).

And finally, that horrid scrollbar jump has been fully taken care of.

So, if this is all new to you, or you’re in the mood for an update… then by all means, get Sweet Titles today!

Download Sweet Titles: Version 1.0 Final

Also see when the Sweet Titles launch article for history. The original article is outdated, but it’s nice for reference. I have purposely turned off comments in that one because the feature requests were getting out of hand.

Other than that. Enjoy!

150 Responses to “Sweet Titles Finalized”

Michael
February 2nd, 2006 at 8:45 pm

Is there an easy way to strip out the part of javascript that grabs the link url (I mean, when used on a elements)? Personally, I would prefer if these didn’t appear as I believe many users will try to mouse over them (this is what happened to me).

No offense for wanting to cannibalize your idea. It’s definitely sweet.
Edward J. S. Atkinson
February 2nd, 2006 at 9:18 pm

Yes!!! Just a few weeks ago I downloaded it to check it out on a few of my designs…and I just couldn’t stand the scroll bar thing (plus on complex layouts it made some nasty blips). This is excellent!

I’m off to test it out…
Chet Nichols III
February 2nd, 2006 at 9:26 pm

this rocks. ive been thinking about doing tooltips on a site im working on, and i happened to stumble across this accidently. good work!!
Björn Wolf
February 3rd, 2006 at 12:44 am

Nice work but i would prefer some library which works on top of still existing Helper libs such as prototype.js, behaviour.js and scriptaculous. You could distribute another Version claimed with “Light-weight Sweet Titles” just for managing the Tooltip behaviour so no redundant Code will be used throughout the entire Webpage. Just 2 cent from a Fan of your Idea and such Libraries.

Under Safari i still see the original Tooltip above your sweet Title so this renders completely useless in this Case. Maybe you should empty that Title Attribute and “save” in an alternative Property for the specific Object. Thats what i’ve done in my own Trip to “Sweet Titles” :)
Estup
February 3rd, 2006 at 3:28 am

What a great piece of work! Thanks man!
Greetings from Denmark ….
Ivan Minic
February 3rd, 2006 at 3:42 am

This is fenomenal :) Bravo!
Pauly
February 3rd, 2006 at 4:09 am

Cheers again, did you feel challenged by http://www.web-graphics.com/mtarchive/001717.php ? I’m sure I will learn from your code again.
Noa
February 3rd, 2006 at 7:27 am

very nice! the script is a lot faster now…. it doesn’t seem to work in internet explorer 6 anymore however
Noa
February 3rd, 2006 at 8:39 am

alright I got it to work in IE, but the tooltip box is appearing several hundred pixels above the cursor, I have no idea why..
Edward J. S. Atkinson
February 3rd, 2006 at 9:01 am

Uh-oh. Hate to be a downer, but you might want to test this out in Opera…the URL is pulled on top of the tooltip making it unreadable and not very usable.
goetsu
February 3rd, 2006 at 9:55 am

for accessibility it will be great if you can achieve to have the same effect in the onfocus (with keyboard navigation)
Andy Dustman
February 3rd, 2006 at 10:32 am

Better test in Firefox-1.5, too, because all the A elements show is a piece of URL and not the title attribute. ACRONYM works, though.
Alex Leonard
February 3rd, 2006 at 10:34 am

I’ve always really liked the way your tooltips work and had toyed around with using them. And thanks for offering them up :)

Personally I have no real Javascript experience.. so I’ve no idea how this would be achieved.. but I wonder whether ‘Sweet Titles’ could be joined easily with “Simple, accessible more links”
http://www.knusperpixel.com/playground/more-more-links.php

In don’t think this would get around the problem Edward has mentioned above.. but it would lead to better ‘link text’ from a search engine point of view.. it would be a matter of debate as to whether search engines pay as much attention to link titles as it does link text. Hopefully it would also be slightly more accessible??

The ’simple accessible more links’ is quite a lovely solution, but not quite as fancy as yours and has even more trouble in Opera! I wonder is this a fault of Opera’s!?

Anyway, just some thoughts.. possibly not what you want to hear - you’ll soon end up with another 150 comments on this post!
Dustin Diaz
February 3rd, 2006 at 11:00 am

@Michael: Yes. There is ;)

@Edward: I’m glad you’re excited! I am too.

@Chet: Thanks for your feedback :)

@Björn Wolf: The size of Prototype & Scriptaculous vs the size of Sweet Titles… no comparison. It’s already “Light Weight” as you would say (4k).
Regardless, using the Event.Observe method from prototype and the Effect.Opacity from Scriptaculous really wouldn’t save us that much code… the code is in fact, very compact. Did you even look at the code?

@Estup, Ivan: Thanks guys.

@Pauly: I already knew there was no comparison. If you want a bubble, just style your toolTip with that graphic.

@Noa: are you in quirksmode? What DOCTYPE are you using?

@Edward: Don’t use Opera ;) - It was settled in the beginning, there IS no way to get rid of Opera’s default toolTip… you’ll just have to suffer along with it.

@Andy: I’m not sure what you’re describing. Most of the testing was done in Firefox, so it should be spot on with 1.5

@Alex: Cool. I think I’ve seen something like before. Accessibility is always important, and I like that implementation.
Edward J. S. Atkinson
February 3rd, 2006 at 11:39 am

Ah, I must have missed the bit about Opera in the original Sweet Titles post. That’s a shame, but ah well. Thanks for replying to all the comments :-)
Noa
February 3rd, 2006 at 1:13 pm

Nope, I’m not in quirks mode, and I’m using XHTML 1.0 transitional. Actually, it looks like the IE problem only shows up when I put in a conditional statement to disable the sweet titles on anchors that don’t have the title attribute.. I’ve no idea why that would effect placement of the boxes in IE though. You can take a look at it here. These are the only lines I’ve changed in the js:

from
addEvent(current[j],'mouseover',this.tipOver); addEvent(current[j],'mouseout',this.tipOut); current[j].setAttribute('tip',current[j].title); current[j].removeAttribute('title');

to
if(current[j].getAttribute('title') != null && current[j].getAttribute('title') != ""){ addEvent(current[j],'mouseover',this.tipOver); addEvent(current[j],'mouseout',this.tipOut); current[j].setAttribute('tip',current[j].title); current[j].removeAttribute('title'); }
Elliot Swan
February 3rd, 2006 at 4:00 pm

Just thought I’d add that I was looking at Noa’s site and it appears that in IE the popups are appearing where they would if no scrolling has been done.

For example, if you haven’t scrolled down the page at all, the positioning is fine.

Scroll down a little, and the popups will apear on the page where the links used to be the first time you hovered them. Scroll a little more down, and they’ll still be way up there.

No idea why that’s so, but I figured it might help somehow.
Dustin Diaz
February 3rd, 2006 at 4:30 pm

This may be the first time I ever asked this, but are you using IE6 or IE7?
Elliot Swan
February 3rd, 2006 at 5:59 pm

If you’re asking me…I was using IE6. If you weren’t asking me…then you can delete this comment.
I’m Tired at echoshock
February 3rd, 2006 at 6:30 pm

[…] h … with Photoshop - A pretty good tutorial that whitens those nasty teeth of yours. Sweet Titles - The easiest way to add some flavor to your website. You can view an example by r […]
Shimone
February 3rd, 2006 at 7:27 pm

okay… this is definitely a nice upgrade from my last tooltip. If you could please give me some insight however as to how I can enable this only to display for href’s with titles. Right now it’s a bit overkill when you mouse-over an image that has a link both the tooltip and alt attribute show. Previously I had tooltips showing only for elements with a title tag. My javacript skills are unfortunately rather lacking…
Dave Scott
February 3rd, 2006 at 9:08 pm

@Shimone and everyone who’s trying to get it to show only for links with title attributes:

You need to an if statement inside the for loop starting on line 33:
if (current[j].getAttribute('title') != null && current[j].getAttribute('title') != "") { ... }

To prevent the script from also displaying on images that are wrapped in links with title attributes, wrap the if statement above with another if statement:
if (current[j].childNodes[0].nodeName.toLowerCase() != 'img') { ... }

This is tested in Firefox 1.5 and IE6 and works in both browsers. I had initially tried using the firstChild() method in the second if wrapper but it appears that IE doesn’t recognize it, so I switched it back to the childNodes array.

@Dustin - great script! I’m hacking it up a bit to fit with an image gallery script that I wrote, and I’m liking it a lot better than the Nice Titles solution I was previously using. Great job!
Shimone
February 3rd, 2006 at 10:21 pm

YES!
That works beautifully and perfectly :)
Thanks so much Dave Scott!
Aurapp
February 4th, 2006 at 5:35 am

There’s a bug while displaying this tooltip (div element) over a “select” element… the select element stays over div element…
Only in IE…

any idea ?
I tried to modify z-index property… but nothing !

anyway, very good stuff ! thanks !
Dustin Diaz
February 4th, 2006 at 11:02 am

@Aurapp: That’s a known issue, and not worth fixing. You basically need to append an iFrame to the document and have it sit underneath the toolTip, but over the select element… and that just gets too expensive.
Free Hogg » links for 2006-02-05
February 4th, 2006 at 7:17 pm

[…] .4.06 links for 2006-02-05 Filed under: Uncategorized — Hogg @ 8:17 pm Sweet Titles Finalized JS Tooltips (tags: javascript web design) […]
grumbling » ツールチップ
February 5th, 2006 at 8:37 am

[…] �ときのための備忘録も兼ねて。参考サイト : caramel*vanilla 使用tool : Sweet Titles 上記サイトからSweet Titles: Version 1.0 FinalをDL。 […]
Noa
February 5th, 2006 at 10:58 am

@dustin & elliot

Yes, the IE bug seems only to happen when you’ve scrolled down the page, and the distance between the cursor and the tooltip increases with the distance you’ve scrolled down the page. Btw, the symptom is the same with both IE6 and IE 7 beta 1. I’m confused!
Justin Perkins
February 5th, 2006 at 11:01 pm

Aurapp, If you really want to know why that happens in IE (dynamic HTML slipping under select boxes) and what you need to do to fix it, I recommend reading this article on MSDN and this one where they propose a solution.

Hardly worth all the work in the case of “Sweet Titles”, as Dustin said.

If you’ve ever tried to style a select box and were unhappy with the results in IE, this explains *why* select boxes don’t take CSS styles in IE. I find the whole thing really interesting :)
Johan
February 6th, 2006 at 3:23 pm

“And finally, that horrid scrollbar jump has been fully taken care of.”

I wrote about that bug and replaced with your reworked JS. Fixed indeed, one happy customer(?? collegue)

Need a different tooltip style:

body div#toolTip { position:absolute;z-index:1000;width:220px;background:#49491A; text-align:left;padding:1px;} body div#toolTip p { margin:0;padding:5px;color:#fff;font:82%/1.2em verdana,arial,serif;border:2px double #E8E8D6; } body div#toolTip p em { display:block;margin-top:0.3em;color:#E8DBB3; font-style:normal;font-weight:bold;padding:5px; } body div#toolTip p em span { font-weight:bold;color:#fff;}
trilodge computin blog » Sweet Titles
February 7th, 2006 at 3:02 am

[…] n Variante. Wer’s nicht glaub der besuche http://www.dustindiaz.com/sweet-titles-finalized/. Anleitung und Download inbegriffen. viel Spa […]
Nice !
February 7th, 2006 at 5:54 am

nice !!! how do you take off the link and just leave the message ???

http://resnumerica.free.fr
Kelly Miyashiro
February 7th, 2006 at 7:28 pm

For some reason in IE 6 I get a javascript error whenever I mouseover a link. It says “nodeName is either null or not an object.” Weird?
Nik
February 8th, 2006 at 2:23 pm

For some reason in IE 6 I get a javascript error whenever I mouseover a link. It says “nodeName is either null or not an object.” Weird?

I get the same error, i see that it has been fixed on that page, care to share what you did?
Nik
February 8th, 2006 at 3:32 pm

Nevermind, it conflicted with the live-calendar plugin for wordpress. Not quite smart enough to figure out why.
Johan
February 8th, 2006 at 4:25 pm

http://domscripting.com/blog/display/47

Dustin, they did not mention your efforts, so I did.
Johan
February 8th, 2006 at 6:51 pm

How about UDDST *Unobtrusive Dustin Diaz Sweet Tooltips*

(just kidding)

Thanks for the script!
ConnyLo
February 9th, 2006 at 2:24 am

Hello Dustin,

thank you for sweet titles! I want to run it on my site. On testing I think I would prefer not the url of a link being displayed in the title. Or displaying the url only if wanted from me. Can I realize it?
Orlando
February 9th, 2006 at 11:04 am

Nice script. A possible Opera-workaround: Have you tried removing the attributes title and href on mouseover and reinserting them on mouseout? Requesting the link could be done by using location.href and non existing titles will not be shown.
djones
February 10th, 2006 at 8:13 am

If you don’t want the URL, change line 85 from

this.tip.innerHTML = ""+anch.getAttribute('tip')+"“+access+addy+”“;

to

this.tip.innerHTML = ""+anch.getAttribute('tip')+"";

If you want it to show on links, but not other tags that you’re using the title attribute on (such as my case, where I’m using a tooltip on a table row to provide a longer description of the data), use a conditional statement, making it:

if (!addy) { this.tip.innerHTML = ""+anch.getAttribute('tip')+""; } else { this.tip.innerHTML = ""+anch.getAttribute('tip')+"“+access+addy+”“; }

tested in IE6, Safari 2.0.3, and Firefox 1.5.2
(please delete the comment above, I wasn’t sure if the code tag on this blog would be block or inline.)
jeriko one 4.0 » Jeriko One
February 11th, 2006 at 7:10 pm

[…] nd die Kommentarfunktion werden auch noch darauf umgestellt. Ferner läuft hier Behaviour, Sweet Titles für schönere Tooltips und Lightbox Plus für die […]
Pascal
February 12th, 2006 at 5:51 am

There’s a biiig problem on your site: I’ve just switched to the “printed page” theme just for fun and now the switcher is gone! Maybe you should not hide it, but place it at the end or something like that…
Nogz Blogz :: Change Of View :: February :: 2006
February 12th, 2006 at 6:02 am

[…] ry Bonsai. My main reasons for doing this were to provide support for Lightbox JS and and Sweet Titles, which have been deployed along with t […]
Webmasterfind Blog Tooltips mit Javascrpt und CSS
February 13th, 2006 at 8:50 am

[…] ks zu Tooltips-Visualisierungen. Bubble Tooltips ist optisch recht hübsch gemacht und Sweet Titles, die etwas rustikalere Variante. Dezent eingesetzt sind Tooltips recht brauchbar, […]
sam
February 15th, 2006 at 9:58 pm

it would be great to be able to set the title to appear in a set place or force them above the link.

I have a page with flash + sweet titles some titles appear under the flashobject.

great sweet script :-)
Dustin Diaz
February 15th, 2006 at 11:16 pm

@Sam: As of now, I haven’t a clue on how to get these titles to appear above your flash objects. That’s definitely something I wasn’t expecting to run into. Sorry I don’t have a better answer for you at the current moment.
sam
February 16th, 2006 at 6:36 pm

I have a plan of sorts but my client side scripting skills are not adept enough to implement it.

#1 - titles in a reigon could be ignore. example if the script could be customised in the settings - specifiying a (div) id and then handling the sweetTitles in this div diffently

or

#2 the script could check the clasName of the element with the title and contained* ’stForceAbove’ then the script would force the sweetTitle to appear above the element. Also swForceRight, swForceLeft. Possibly using className**

*since mulitple classes can be applied to elements
**with some sort of regex to see if the class is stForce[Right|Left|Below|Above]

would this be possible?

I made a small tweak to the lightBox script to hide flash when showing the lightBox and show flash again after closing - does’nt work in opera.
I used some code from dynaCSS to achieve this. However this is a different ball game.

atb - Sam

ps - Flash is a pain, but hey!?
Neo
February 16th, 2006 at 10:55 pm

@Sam

Try placing wmode=”transparent” into the flash embed tag. Hope that helps.
Egor
February 17th, 2006 at 11:18 am

Wow, these tool-tips truly are great. I’ll definitely be making use of them in the future. Thanks!
sam
February 17th, 2006 at 1:19 pm

thanks Neo. I really did’nt expect that to work but it does.

Does’nt make sense either but glad it works, in every browser I have tested also work fines thats only PC

Big Bacon double cheese whooopie with extra pickle
Singman
February 18th, 2006 at 11:47 am

I’m using your tooltips, and it’s working perfectly in Firefox. My only problem is with IE v6.0 : nothing at all is displayed (blank page).
I have tried to see where is the problem, and if I remove the 2 javascript, page is displaying again.
The script is the original version with just the link removed (as written above). I dont see any errors and page is CSS1 and XHTML compliant.
Jacob
February 20th, 2006 at 3:45 pm

To echo the sentiments above, thank you so much for this awesome bit of work.

For all those people out there wanting to remove the URL from the tool tip, this is super easy. You don’t even need to modify the JS file, you just need to set the EM element to display: none; in your sweet titles CSS.

Once again, thanks Dustin!
Sonny Singh
February 21st, 2006 at 3:36 pm

Hello all,

I have been customizing Dustin’s tooltips for use on the www.cms.gov website. I recently downloaded his new “finalized” tooltips and noticed that they did not work like the old ones. The new package does not have the cool fade effect like the old ones did. It is a very small error but here is what you need to change:

this.tip.style.opacity = ‘.’+newOpac;
this.tip.filter = “alpha(opacity:”+newOpac+”)”

becomes

this.tip.style.opacity = ‘.’+newOpac;
this.tip.style.filter = “alpha(opacity:”+newOpac+”)”

The second line need to have “tip.style” which was present in the first line.

Sonny Singh
Wordpress使用心得（二）漂亮的气泡窗口 at punkprojekt.com
February 25th, 2006 at 7:16 pm

[…] Sweet Titles […]
Juglar :: Personalizar los elementos “title” :: February :: 2005
February 27th, 2006 at 3:19 pm

[…] Más: HoverHelp JavaScript Fading Tooltips wg:Bubble Tooltips Sweet Titles Finalized qTip . css . learn . solarDreamStudios Ref: torresburriel.com « Anterior: Technorati Siguiente: Perfiles » […]
aurapp
March 6th, 2006 at 8:50 am

I saw another bug (or problem with IE ?)…
Letters are truncated in IE (at the end of each line).

any solution ? or is it a IE bug ?

thanks :-)
Chris
March 9th, 2006 at 8:15 am

Just a note, i found that neither your css nor your xhtml validates. Is this due to the sweettitles? is there a way to tweak it so it does validate?
Bonita in Pink
March 10th, 2006 at 8:15 pm

Thanks so much for sharing this!
I use Wordpress and was able to enable them there!
;-)

Awesome!
Ben Gray
March 14th, 2006 at 9:44 am

Is there a way to get rid of the “http://www.” part of the address when it’s shown in the title? i.e. I just want it to say:

openswitch.org/

instead of:

http://www.openswitch.org/
michael
March 28th, 2006 at 8:35 pm

Ben,
add the following ..

if(addy.indexOf(”http://www.”) > -1)
addy = addy.replace(”http://www.”, “”);

under
addy = (anch.href.length > 25 ? anch.href.toString().substring(0, ….

Dustin, ever thought of using this prototype? or make the script more oop/ or combine it with Prototype, that way you can reuse it in case you want to create error title tags for forms and etc?
Tom
March 29th, 2006 at 2:28 pm

This is an amazing script. I liked it so much, I made a Wordpress plugin to install it easily.
Don’t Neglect the title Attribute | Monday By Noon
April 10th, 2006 at 4:18 am

[…] Some developers have seen the usefulness of title and taken it a bit further by attempting to make them even more useful through the implementation of JavaScript and CSS to control their display. Namely Dustin Diaz and his Sweet Titles and Nice Titles. […]
faglork
April 14th, 2006 at 1:14 pm

I have the same problem as Andy: Works in IE but not in FF 1.5 (updated today). Any ideas?

the site in question is
http://www.locanda.ebermannstadt.com

Tooltips show only the URl bit not the link title.

Greetings from Germany,
faglork
Ben Gray
April 19th, 2006 at 11:48 am

Thanks Michael, for that help! Works like a charm.
JJ
April 19th, 2006 at 3:35 pm

This is my second day fiddling with Wordpress in general, and I’m glad I stumbled upon this thanks Dustin Diaz!

I wanted to get my http://www.mydomain.com out of my url’s, so I added a bit of code - this will take into account the length of the final cut:

replace:

addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25)+”…” : anch.href); - on line 77

with this:

var jurl = “http://www.yourdomain.com”; /* enter your url */
var jlen = 25; /* enter desired length */
var jall = anch.href;
var jend = jall.toString().substring(jurl.length,jall.length);
if (jall.indexOf(jurl) > -1) {
if (jend.length > jlen) {
addy = jend.substring(0,jlen)+”…”;
} else {
addy = jend;
}
} else if (jall.length > jlen) {
addy = jall.toString().substring(0,jlen)+”…”;
} else {
addy = jall;
}

Hope this helps some out…I saw something like this written before, but it cut my url’s off.
sixtwothree.org » Archive » Rhythmic Uprising podcasts
April 19th, 2006 at 5:09 pm

[…] I used Dustin Diaz’s Sweet Titles for the nifty mouseover effects on the links. […]
Michael
April 20th, 2006 at 12:48 pm

Does anyone know why using this in the link loop works in FireFox but not in IE? I’m trying to restrict Sweet Titles to only apply in the #content div versus the entire page (such as navigation):

Original:
var current = document.getElementsByTagName(this.tipElements[i])

Modified:
var current = document.getElementById(’content’).getElementsByTagName(this.tipElements[i]);
José Luis
April 28th, 2006 at 10:25 am

Michael. I tested your modification and it works in IE.
Allan
April 28th, 2006 at 7:47 pm

Lamenting of a tooltips searcher

Any insights into how this might be able to handle dynamic content?

I want the mouseover event to trigger an Ajax call to a php program that does database dance and returns appropriate content and the tooltip comes up. thats all. (each
Maurizio
April 30th, 2006 at 1:18 pm

I too got an error in Internet Explorer 6:
“nodeName is either null or not an object.”

This both in my website and in your simple example page… but in this website, it works!

How can I get rid of this error?
Maurizio
April 30th, 2006 at 6:04 pm

I’ve resolved the IE issue using this one instead:
http://www.astahost.com/info.php/sweet-titles_t11175.html
The author is always our hero Dustin ;-)
Maybe an older version of ST?

Dunno, but it works fine for me (also with IE)…
Mithrill
May 9th, 2006 at 4:40 pm

Just wante to say thanks for all the hard work. This is a sweet script. Also, I got a quick question, is there anyway to only show a the relative url path?

Thanks again!
David King
May 12th, 2006 at 3:45 am

Definately deserves its name of ’sweet’ tiles!

Cool code, idea, and execution!
Tony
June 1st, 2006 at 1:22 pm

I’ve been using the previous version of Sweet Titles, and managed to add two borders to the tooltips: eg http://ied.gospelcom.net/blogging.php
to give a drop shadow effect.

The same CSS in the new tooltip disregards the second line of my CSS so I don’t get a narrow border, and indeed if I take the standard CSS from this page, it also only uses the first line, and disregards div#toolTip p and the later lines.

Any idea why?

tony
Alf Thomas Nilsen
June 8th, 2006 at 5:52 am

Thank you for this great script!

I needed to display some of my tooltips above select elements, and most of my users are using Internet Explorer. This caused some problems, but thanks to a comment from Justin Perkins I was able to modify sweetTitles to handle this by putting an iframe underneath the tooltip.

I suppose other people might be struggling with this also, so here is the modification I used:

1. Add a few new functions to sweetTitles.js:

openShim: function() {
if(this.tip == null) return null;

var shim = sweetTitles.createShim();

this.tip.style.zIndex = 100;

shim.style.width = this.tip.offsetWidth;
shim.style.height = this.tip.offsetHeight;
shim.style.top = this.tip.style.top;
shim.style.left = this.tip.style.left;
shim.style.zIndex = this.tip.style.zIndex -1;
shim.style.position = “absolute”;
shim.style.display = “block”;
},
createShim: function() {
if(this.tip == null) return null;

var shim = document.createElement(”");

shim.name = sweetTitles.getShimId();
shim.id = sweetTitles.getShimId();

shim.style.filter=”progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)”;
window.document.body.appendChild(shim);

return shim;
},
closeShim: function() {
if(this.tip==null) return;
var shim = sweetTitles.getShim();
if(shim != null) window.document.body.removeChild(shim);
},
getShimId: function() {
if(this.tip.id == null) return “__shim”;
return “__shim”+this.tip.id;
},
getShim: function() {
return document.getElementById(sweetTitles.getShimId());
}

2. In tipShow function, add the following line of code at the bottom (after “this.tipFade(10);”):

sweetTitles.openShim();

3. In tipOut function, add the following line of code at the bottom (after “sweetTitles.tip.style.visibility = ‘hidden’;”):

sweetTitles.closeShim();

I’m a Java programmer with little experience with Javascripts so please feel free to modify it further if it’s not according to “best practice”.

I hope this was useful :)

Cheers!
Footsteps in the Mirror » Smacked For Talking Too Much
June 12th, 2006 at 9:11 pm

[…] Fix that Javascript conflict between Sweet-Title and Lightbox in Internet Explorer (by the time you read this, the conflict would have already been fixed). […]
nicolas
June 20th, 2006 at 9:34 am

hello,
to make this properly work in safari.
(to have the “sweet-title” correctly positioned)
you should change:
document.documentElement.scrollLeft
to:
(document.documentElement.scrollLeft || document.body.scrollLeft)
same goes for .scrollTop
thank you
Andrew
June 26th, 2006 at 10:23 am

I’m having a problem with AJAX updating DIV’s and then tooltips not working. I’ve tried calling Tooltip:init() the AJAX completes, but no luck, the Tooltips aren’t displayed correctly (in Firefox or IE). Any idea’s on how to fix this?
Groningen
June 28th, 2006 at 4:53 am

Thanks for the advice to make it work properly in safari.!
Alf Thomas Nilsen
June 29th, 2006 at 11:47 pm

In my previous post about fixing the tooltip issues with select elements in IE there was a line that didn’t get parsed correctly on this site because it contained HTML code. I have also discovered that certain line to create warnings in FF because of illegal characters. Here is a fix:

Replace:
var shim = document.createElement(””);

With:
var shim = document.createElement(”iframe”);
shim.setAttribute(’scrolling’, ‘no’);
shim.setAttribute(’frameborder’, ‘0′);
shim.setAttribute(’style.position’, ‘absolute’);
shim.setAttribute(’style.top’, ‘0px’);
shim.setAttribute(’style.left’, ‘0px’);
shim.setAttribute(’display’, ‘none’);

Cheers!
ptvGuy
July 8th, 2006 at 3:54 am

I’ve added keyboard navigation support (onfocus and onblur) to your script for the sake of accessibility. Interestingly, this implementation works fine in Internet Explorer while tending to pop up title windows off screen in Firefox. Any thoughts on a fix for that?

===============================
PERTINENT CODE
===============================
addEvent(current[j],’mouseover’,this.tipOver);
addEvent(current[j],’focus’,this.tipOver);
addEvent(current[j],’mouseout’,this.tipOut);
addEvent(current[j],’blur’,this.tipOut);
===============================

To see this fix in action, you can check my site or SOPTV.
Jelle
July 10th, 2006 at 1:16 am

Yes this won’t work that nice because the Titel will always show at the spot were the mouse is left on the screen.
ptvGuy
July 15th, 2006 at 4:29 pm

I still leave the fix in place, because I believe that it’s important to make every effort (even when it’s imperfectly realized) to be as accessible as possible. Those that actually need it will realize that the effort was made to include them. Those that don’t need it, will probably never even realize that it’s there.
eduardo
July 19th, 2006 at 4:09 pm

I am trying to disply sweettitles in images. I can’t code, so all i
was able to do was to change:

tipElements : [’a',’abbr’,'acronym’], // @Array: Allowable elements
that can have the toolTip
to
tipElements : [’a',’abbr’,'acronym’, ‘img’], // @Array: Allowable
elements that can have the toolTip

This didn’t work.
All help will be much appreciated. Thanks!
claude
July 31st, 2006 at 2:21 am

Hi Dustin!

thanks for the great work!!
Can you tell me where and how i have to modify the code when I only want to aply sweet titles for links that have the class ‘links’? Sorry for my bad english!

qunst.net
Keuken
August 13th, 2006 at 10:57 pm

Really like the Sweet Titles functionality, but I’m still missing some nice mouse movement. Maybe a future possibility..
Bram Gerritsen
August 17th, 2006 at 3:11 am

When implementing the script on a website, I needed some extra functionality. Such as the tooltip tracking the mouse on movement.
I’ve made a revision of the script, which you can download at: http:/www.poolvereniginginfinity.nl/download/sweet-titles2.zip

Changes are listed below:
- Only show tooltip for links with title attribute set
- Mouse tracking
- Support for area elements
- Fixed bug with tooltip position in ie6
- Properties to enable/disable fading and tooltip delay
- Tested in ie7

Have fun.
ABadr
August 18th, 2006 at 9:05 am

Hi everyone,

Bram,

I’m extremely interested in your updated script, but your site seems to be down. Is there any way you could send this to me? cheers

PS Dustin, great work- I love the script but can’t seem to get image functionality (area) working in this version!
milo317
August 19th, 2006 at 1:38 pm

hi dustin, i have a user.js file, should i place both of your *.js files in the user.js file?
Michael
August 22nd, 2006 at 10:49 am

FYI, regarding the IE tooltip box location problem Noa was having a while back (http://www.dustindiaz.com/sweet-titles-finalized#comment-1894),
I was having the same problem with an XHTML transitional site and found that removing the line:

from the beginning of my document fixes the problem.
Michael
August 23rd, 2006 at 8:05 am

I have solved a couple of problems with integrating sweet titles that may be helpful for others out there.

1. The skewed position of the tip box in IE when scrolling down for an XHTML page can be fixed by removing the (xml version=1.0) tag from the beginning of your document. This tag is optional for per the XHTML spec.

2. The “nodeName is null or not and object” javascript error with IE in my case was due to a conflict with another javascript library (lightbox, I think). Renaming the definition and calling code of the “addEvent” function to something unique such as “STaddEvent” fixed this problem for me.
Shaun(OfTheDead)
August 29th, 2006 at 1:35 pm

Nice.

I’m promising myself to stop re-inventing the wheel when it comes to web-design.

Your titles are definately sweet… Much sweeter than anything I could put together myself, that’s for sure. I’m eager to use them on my site.

Keep up the good work, dude.
eduardo
September 3rd, 2006 at 4:50 am

Did anyone succeed in downloading Bram’s (http://www.dustindiaz.com/sweet-titles-finalized/#comment-8339) version? His site seems to be down for a while now (even tough the domain exists). Would someone be so kind as to post a link for downloading it?
Thanks a lot.
Boby
September 17th, 2006 at 11:09 am

No. But it will be interesting also.
I have modified a bit dustin’s script, just to hide tooltip on defined tag ID. It seems to work good in IE browsers, but not work at all in Mozz with this mod.
I did search all over the net, any suggestions or ideas, but with no results.

This is a great script, and a potential too. Great work Dustin

P.S.
My last post vanished misteriosly “awaiting moderation”?
Bill jones
September 18th, 2006 at 4:19 pm

This is really nice for tips. Clean and simple. Great work Dustin. I was just wondering if there is a way to make the popup sticky with a mouseover and disappear when the mouse leaves the layer. I currently use overlib due to its flexible functionality, but its pretty code heavy and this is so much cleaner.
Tony
September 24th, 2006 at 2:16 pm

Hi
I love Sweet Titles, and thought I should update to the latest version. For some reason, IE6 is not positioning the tip near the link, if the page has been scrolled at all. (This is also happening in my old version, yet it did not used to, and I have not knowingly changed anything.) Yet on this page about Sweet Titles (ie the one we are reading now), tips DO position correctly in IE6, however much scrolling has happened. I even tried linking temporarily to this page’s file:
http://www.dustindiaz.com/wp-content/themes/sweet/js/sweetTitles.js

and that made no different to my test page.

I can’t see the othe file needed - addEvent.js - in the source for this page, otherwise I would have tested that to see if would work in my page.

Anyone have suggestions?

Blessings

Tony
Tony
September 25th, 2006 at 6:20 am

Sorry -re previous post, that was my mistake. The javascript was reacting to something in the page head.

However, I do have a query. In the old version, I was happily able to run a second line of CSS for the tooltip: div#toolTip p
and this enabled a neat second border effect. With the new version, a second line of CSS like this is no longer having any effect. Indeed, if I use the four lines of CSS in the downloadable code for the final version, only the first line body div#toolTip is taken any account of either.

Best wishes

Tony
Vojtek
October 9th, 2006 at 10:05 am

Hey, I do really like your script, however I would prefer to use it as a function on mouse over. I suppose it is possible, but I would need an example.. Thanks.
Ben
October 12th, 2006 at 6:55 am

Here’s an alternative tweak to get sweettitles to display above select boxes:

In the sweettitles.js file, change line 82 from this:

this.tip.innerHTML = “”+anch.getAttribute(’tip’)+”“+access+addy+”“;

to this:

this.tip.innerHTML = ”+anch.getAttribute(”tip”)+’‘+access+addy+’‘;

Then add this line after it:

if (document.all) document.getElementById(’tip_frame’).style.height = document.getElementById(’tip_inner’).offsetHeight;

Modify the sweettitles.css file like this for example:

body div#toolTip {width:300px; color:white; position:absolute; top:auto; left:auto; z-index:899;}
body div#toolTip #tip_outer {width:100%; background:#000; position:absolute; z-index:898; -moz-border-radius:5px;}
body div#toolTip #tip_inner {padding:6px;}
body div#toolTip p {margin:0; padding:0; font:11px/12px verdana,arial,sans-serif; line-height:15px;}
body div#toolTip p em {display:block; margin-top:3px; color:#FF6600; font-style:normal; font-weight:bold;}
body div#toolTip p b {color:#00CC00; font-style:normal; font-weight:bold; }
body div#toolTip p em span {font-weight:bold; color:#ffffff; }
body div#toolTip #tip_frame {width:100%; position:relative; z-index:897;}

I haven’t tested this with Safari nor Opera.

Cheers,
Ben
Ben
October 12th, 2006 at 7:01 am

Oops! All the HTML was stripped from my previous post. How to I post code in this thing?

I’ll try again:

Change line 82 to this:

this.tip.innerHTML = ‘<div id=”tip_outer”><div id=”tip_inner”><p>’+anch.getAttribute(”tip”)+’<em>’+access+addy+’</em></p></div></div><!–[if lte ie 6.5]><iframe id=”tip_frame” frameborder=0></iframe><![endif]–>’;
New Design at Orange Days
October 15th, 2006 at 10:22 am

[…] I’ve reintroduced Sweet Titles, which is that nice effect you get when hovering over links as shown above. I still need to figure out why they won’t work on page 2, 3 and so on. It’s a bit embarrasing since I also faced this problem the last time I had Sweet Titles installed, but eventually solved it. […]
alan
October 16th, 2006 at 8:08 am

Sorry but I’m having trouble with install.
I uploaded both css and js folders to my current theme’s folder.
I copied the scripts into my header.
But I didn’t quite understand where I should be putting the ‘@import “css/sweetTitles.css”;’
Where does that go exactly?
Help please
Thanks
Jermaine
October 17th, 2006 at 1:37 am

Sweet titles is a great and of course sexy way to display tooltips.
But i still have a problem with it.

It would be great if there is a way to have a command, when to show tooltips and when not, like the accesskey beeing displayed when used.

There are navigations where you don’t want to show tooltips and links in articles, you want to show tooltips.

Is there a way to have sweet titles on and off on one page?

I tried to make a command like showTip in the .js file that should call the functions when showTip=”yes” is in the href tag, but did not get it working.

Thanks for your help
Jermaine
Michelle
October 21st, 2006 at 9:51 am

I just want to say thank you for sharing your sweet titles with us. gr8 work!!!
» CSS: Techniques, Tutorials, Layouts » Smashing Magazine | modern magazine for web-designers and developers
October 25th, 2006 at 4:33 am

[…] Sweet Titles Finalized JavaScript Fading Tooltips […]
Pc world » Dicas sobre o Wordpress e este site
October 25th, 2006 at 7:27 pm

[…] Além do WordPress e dos plugins acima, nós usamos o jQuery e o Thickbox para fazer aparecer uma pequena janela e escurecer o fundo da tela quando o leitor clica numa interrogação perto dos ícones de RSS. Os balões com os títulos dos artigos ou com os carcteres chineses que aparecem quando o mouse para sobre um link ou sobre uma palavra chinesa são gerados pelo script Sweettitles. O sistema de assinaturas, que permite que os leitores recebam na sua caixa postal avisos sobre os novos artigos do site, é o Listmessenger. Finalmente, mas não menos importante, o desenho do nosso site é feito pelo tema Hemingway. […]
ZeRoRaVeN
October 29th, 2006 at 5:01 pm

For those who wanted to get rid of the URL or even better, only display a tooltip when there’s something to see. I have a solution (Only tested with linkies)

—– Getting rid of the tooltip when unnecessary —–
FIND:
if ( anch.nodeName.toLowerCase() == ‘a’ ) {
addy = (anch.href.length > 25 ? anch.href.toString().substring(0,25) "…" : anch.href);
var access = ( anch.accessKey ? ‘ <span>[’ anch.accessKey ‘]</span> ‘ : ” );
} else {
addy = anch.firstChild.nodeValue;
}
ADD UNDER:
if (!anch.getAttribute(’tip’)) { return; }

—– Getting rid of the URL —–

FIND:
this.tip.innerHTML = "<p>" anch.getAttribute(’tip’) "<em>" access addy "</em></p>";

REPLACE WITH:
this.tip.innerHTML = "<p>" anch.getAttribute(’tip’) "<em>" access "</em></p>";

————————-

Truthfully, I’m quite poor at Javascript. However, I do have a good deal of experience with PHP so it was only a simple matter to go to w3schools to see the difference between the two. It was a 15 minutes job. ^_^
Jermaine
November 7th, 2006 at 4:37 pm

Hello ZeRoRaVeN,

thank you so much for one line of Code to get rid of the tooltip when unnecessary.

It was too easy for me to see ;-)
ilovesing.com » Archive » CSS相关资源网站
November 10th, 2006 at 6:20 am

[…] Sweet Titles Finalized JavaScript Fading Tooltips […]
Aarron Walter
November 16th, 2006 at 8:18 am

Has anyone created a solution for attaching events when Ajax content gets loaded rather than on window load?
dam
November 21st, 2006 at 9:26 am

Hello, great Script =)
Is it possible to use the Tooltips also for Tags and not only for ?
The Null Lab » CSS technology examples
November 26th, 2006 at 9:33 am

[…] Sweet Titles Finalized JavaScript Fading Tooltips […]
Bram Gerritsen
November 27th, 2006 at 1:07 am

Hi guys,

Just came accross this site again since my message at 17 august.
The link I provided for the updated script didn’t work (I made a typo in the folder name), but it works now. http:/www.poolvereniginginfinity.nl/download/sweet-titles2.zip

Sorry I didn’t see your messages earlier. Maybe some email notification would be nice.
kristina
December 6th, 2006 at 10:46 am

I have been testing sweet tiles like Andy and faglork before I cannot get the tooltip to work in Firefox 1.5.0.8. It will only display the url and not the text and this is true for the demo page as well

VizualBod

December 29th, 2006 at 3:56 pm

Is it possible to have have line breaks inside of sweetTitles?
I would like to turn all commas and semicolons to <br />


<ul>
<li><a href="http://example.com" title="Hair: Blonde, Eyes: Green, Height: 5' ">Dawn,    28</a></li>
<li><a href="http://example.com" title="Hair: Red,    Eyes: Blue,  Height: 5'5">Shirley, 37</a></li>
<li><a href="http://example.com" title="Hair: Dark,   Eyes: Blue,  Height: 5'1">Susan,   22</a></li>
</ul>

Please help.

VizualBod
December 29th, 2006 at 4:57 pm

Something similar to:
```
tip.replace(/,/, ",&lt;br&gt;");
```
The problem is I do not know, where to place it.
thinkeasy » Blog Archive » Smooth Slideshow
January 12th, 2007 at 6:43 am

[…] Dustin Diaz hat auf seiner Seite ein schönes Script mit dem netten Namen “Sweet Titles”. Dahinter verbirgt sich die Möglichkeit fading tooltips in Seiten zu integrieren, die mit der Maus über einem Link angezeigt werden. Das Beste dabei ist aber, dass man steuern kann bei welchem Link sie zu sehen sein sollen und bei welchem nicht. Eine nette Spielerei, die an manchen Stellen ganz nützlich sein kann. […]
WS ToolTips auf Webwork Studios
January 12th, 2007 at 9:52 am

[…] WS ToolTips 9. Januar 2007 .download { clear: both; padding: 5px 10px 5px 70px; background-image: url(http://www.webwork-studios.de/wp-content/themes/webwork_studios/images/download.png); background-position: 2px 50%; background-repeat: no-repeat; background-color: #D9DFF0; border: 1px solid #ccc; font-size: 0.8em; line-height: 1.4em; color: #666; height: 85px; } Ich finde die Sweet Titles von Dustin Diaz ziemlich cool. Deswegen dachte ich mir ein kleines PlugIn zu basteln, welches mir durch einfaches Aktivieren diese Sweet Titles zur Verfügung stellt. Hier stelle ich es euch nun zur Verfügung … […]
:: 3D’Zygn 2007 BetaTest Work In Progress.. :: » Blog Archive » Plugin_Compatibility WP 2.1
January 26th, 2007 at 7:54 pm

[…] - Lightbox 2 Wordpress Plugin (js) - Sweet Titles Finalized - Emotions […]
blog.txt at B-612
January 28th, 2007 at 6:49 am

[…] J’aurai vraiment voulu intégrer le très sympa sweetTitle, mais ça ne marche pas :/ . Dans le même ordre d’idée, j’aurai voulu utiliser Behavior pour pouvoir faire pulser tous mes liens (cf. les billets plus intéressant que la moyenne dans la sidebar) avec script.aculo.us (déjà utilisé pour les zolies images lightbox), mais encore une fois ça ne marche pas… je verrais ça plus tard, parce que là j’ai une putain de grippe qui me cloue au lit (vive les portables quoi). […]
Janice Valletta
January 29th, 2007 at 12:05 pm
This script seems to ask explorer 7 to continually refresh. Does anyone have a fix for that?
:: 3D’Zygn 2007 BetaTest Work In Progress.. :: » Plugin_Compatibility WP 2.1
January 31st, 2007 at 8:41 am

[…] - Lightbox 2 Wordpress Plugin (js) - Sweet Titles Finalized - Emotions […]
seth
January 31st, 2007 at 9:00 pm

I’m wondering if there is a version of this nice JS tooltip, which which behaves properly with IE(6/7).

I’m having the same issues as posted before. The tooltip showup at the top of the page once the page is scrolled.

If there are hints as to how to fix this, I can try that as well.

I’m not a Javascript coder.. I only know Perl, so hopefully the hints will be simple enough to follow.
hups
February 8th, 2007 at 6:39 am

hello can sweet titels make this bei take this [img][/img]
i mean when i write a text example:

bla bla bla [img][/img] bla bla

the it show text and the image fade in ?

sorry for bad english
hups
February 10th, 2007 at 11:26 am

please help me !!!!!!

hello,

i search for a javascript or plugin

my idea is i will make a tool tip but not with only text with text and image.

examble what i search

here text here text and so on (image link titel = i am a Picture) here text and so on

and now wenn thread is ready show it so

here text here text and so on [b][u]Picture[/u][/b] here text and so on

whe the mouse come over the word [u]picture[/u] an image is fade in with the text [u]i am a picture[/u]

sorrry for bad english
hups
February 11th, 2007 at 1:09 pm

ok i have it

one question what must i do for take the tooltip in the center of the courser??
hups
February 13th, 2007 at 5:16 am

No answer is this dead here ??
Jose Ventura
February 16th, 2007 at 12:53 pm

Hi; I’m Download the SweetTitle.zip, but I want to use it in a website that I’m under development, It is free to use?, How do I can implement it on my web?
my web should be .org oriente in help peoples (Dominican friends) to deal with common windows problems, and If you have something wrote in spanish I’ll like to link this to help peoples to program JavaScrip in spanish too

Thanks,

Jose Ventura
http://www.arijua.org
Gabriele
March 16th, 2007 at 7:24 pm

hello,
I do not succeed to make to visualize mine correctly sweet title. Some times appear to me very far away from where it must appear. The bug and on IE6 and 7.
My site is www.messinadoctors.it
Schriftprobleme beim Einblenden im Firefox | eighty1
March 30th, 2007 at 5:19 am

[…] Bis vor kurzem hatten wir bei neu.de und auch ich hier lustige Effekte beim Fade-in von Elementen (in meinem Fall war’s das Sweet Titles): Im Firefox veränderte sich die Schrift und wurde fetter oder schmaler, dank Anti-Aliasing und ohne Grund. Warum das so ist, kann ich (noch?) nicht sagen, allerdings habe ich einen netten Workaround gefunden: […]
Jeremiah
April 18th, 2007 at 5:30 pm

Is there a way to have this apply to certain links in the page and not others? I tried the suggestion above by Michael
```
Original:
var current = document.getElementsByTagName(this.tipElements[i])
Modified:
var current = document.getElementById(’content’).getElementsByTagName(this.tipElements[i]);
```
I can’t make this work for some reason, if anyone has some suggestions? I have one link at the top of a page that I don’t want to have this tool tip show up for, but I want it on the rest of the page (about 65+ links with specific info).
I know very little javascript but need to get this issue resolved.

Any suggestion is more than welcome.

Thanks,
Jeremiah
Alvin
May 5th, 2007 at 11:34 am

Hello
Thanks for sharing this great script. i Love it

I wonder if is a way for the script to show only for this kind of link

Example:
<a tip="tip message goes here" href="#">TIP</a>

No for links without a tip i mean.

Thanks in advanca
Alvin
Jermaine
May 8th, 2007 at 2:40 pm

Hello Jeremiah,

follow the post of “ZeRoRaVeN” above. I used it for some links like legal information and terms of use. It works perfect.

Jay
Aalijah
May 29th, 2007 at 3:58 am

Thank you for sweet titles and all the people who posted the useful things on customizing. You were a big help to me.
Marc
June 20th, 2007 at 11:51 am

You did a really good work on these sweetie titles. And with all the comments i was able to customize everything to my needs. Thanks to all the people who posted the good tips here.
nati
June 28th, 2007 at 1:41 pm

hay all! first of all this script really looks great. but i have a little problem…
the thing is that on every link on the page regardless if it has a title attribute the script pops up and display only the url witch the link points to…and totally ignores what i specify in the title attribute. make sense at all to anyone??
i would really appreciate your help :)
Jag
July 8th, 2007 at 1:32 pm

Sweettiltles tooltip works fine but when i want to create a link to google for example using a href tag (no tootip to be displayed). the link still shows a tooltip empty box when mouse hovers over it.
rogerke
August 14th, 2007 at 10:40 am

hey hey,

works fine on links, but the thing is… i want to use it on an input box, to show some help (check my site, scroll to the right and hover over the “Search…” if you want to check it.

works fine in firefox & safari. doesn’t work at all in ie6 and ie 7 and i’m guessing it doesn’t in opera either, but that i didn’t test.
any ideas on how to solve this would be greatly appreciated!
Jay
August 22nd, 2007 at 3:27 am

I haven’t been around for a while and did not use sweet titles on my new projects, but now i have a problem not discussed here before. I use sweet titles a toolbox do explain some descriptions of words, which are NO links. So i used “#” as href. But when i click on these words - which display the tooltips fine - i jump to a comletely wrong page. How can i make sweet titles work without a link???

Thank you
BTW: I know that there are other scripts that do this fine, but i have about 200 datasets that have the sweet titles code included.
theasismp
September 9th, 2007 at 6:36 pm

Hi all,
I have a problem with this excellent plugin and my wordpress RSS feeds as you can see on the right of my testblog at: http://www.aenaon.info/theasis/blog/
When one hovers over the rss feeds the text (many times) gets out of the box of the sweet titles (WHEN the rss text is very long). I mean how can I truncate the text to say 400 characters only? I looked everywhere (?) but could not find a solution for this.
Any idea of how I can fix that? Plz be very spesific. I can follow good instructions and copy - paste as well. BUT I am horrible with coding of any kind.
Many thanx
theasismp
September 9th, 2007 at 11:06 pm

As follow up to my previous BUG (???).
The above mentioned happens in Firefox/2.0.0.6
In IE6 the text stays inside sweetTitles, BUT the text box keeps on changing size all the time, becoming very very long. Really wird.!!!!!
I use wordpress 2.2
Ed
September 13th, 2007 at 11:01 am

Is there any way to have a line break in the title?
Si
November 9th, 2007 at 8:38 am

I have a modified version of this script that only displays the tooltip if the element has a title, rather than every single link. Is anyone interested in a copy?

I’m working on fixing the positioning issue in IE6.

Daniel Richard

November 15th, 2007 at 3:58 am

I’ve managed to fix the IE positioning issue by adding a few lines, mainly browser detection:


//Detect IE5.5+
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

...
scroll down to the following function
...

tipShow : function() {
  var scrX = Number(this.xCord);
  var scrY = Number(this.yCord);

  // if IE is running
    if (browser=="Microsoft Internet Explorer"){
    var tp = parseInt(scrY+24);
    var lt = parseInt(scrX+170);
    }
  // firefox
    else {
    var tp = parseInt(scrY+15);
     var lt = parseInt(scrX+10);
    }

And there you have it. :D

Jim Nickel
November 27th, 2007 at 9:45 pm

For those that want SweetTitles to only display the tooltip if the element has a title, rather than every single link, here is a modification:

At line 30, just put an if statement around the code like this:

for ( j=0; j 0) { addEvent(current[j],'mouseover',this.tipOver); addEvent(current[j],'mouseout',this.tipOut); current[j].setAttribute('tip',current[j].title); current[j].removeAttribute('title'); } }

Enjoy!

Jim
Adrian
December 11th, 2007 at 2:58 pm

Jeremiah,

Your code to have the titles work only on certain links and not others is correct, you just need to change the quotes around the specified id from single to double like this:

Original: var current = document.getElementsByTagName(this.tipElements[i])
Modified: var current = document.getElementById("content").getElementsByTagName(this.tipElements[i]);
Sweet Titles at Justyn’s Blog
January 19th, 2008 at 1:00 am

[…] have added Sweet Titles by Dustin Diaz to my blog just recently, I think it looks great. You will notice it at work when […]
John
January 25th, 2008 at 6:24 pm

@Bram — you’re a superstar… works great. First tried mix of all revisions here, then saw your post.

john.
anthony delorie
March 12th, 2008 at 11:23 am

This was great code to learn from. Thanks Dustin. With that said.. Is there any advantage to not using a pure CSS solution. I like Dustin’s thinking because I much rather put stuff in attributes such as title, accesskey, etc.. but at the same time… I loved how much more simple using the CSS solution seemed to be working with all the browsers and it’s still updatable via ajax if it’s a “real time”
anthony delorie
March 12th, 2008 at 11:23 am

This was great code to learn from. Thanks Dustin and the community. With that said.. Is there any advantage to not using a pure CSS solution. I like Dustin’s thinking because I much rather put stuff in attributes such as title, accesskey, etc.. but at the same time… I loved how much more simple using the CSS solution seemed to be working with all the browsers and it’s still updatable via ajax if it’s a “real time”

./with Imagination