JavaScript Fading Tooltips
Introducing: Sweet Titles
No. It’s not a knock-off from NICE Titles nor is it trying to improve on Dunstan’s revised attempt. And it most definitely isn’t ripped from one of those event-handler infested scripts from Dynamic Drive
No. It’s none of those. Instead I had two goals for this script.
- Make the code cleaner and much more condense - with in fact - less code
- Improve the tooltip effect
I feel I have achieved both and for what I would call innovating the wheel
. To see a working demo just hover over any link on this website and you will be enlightened with Sweet Titles.
What’s the big deal?
Well, for starters as I mentioned the code is “a lot” less than the original scripts by Stuart and Dunstan. However this is no way saying what they did wasn’t great. In fact, it was freakin’ awesome! Also needless to say I was in JavaScript diapers when they did it. I’m not going to compare code length because that would just be stupid and I don’t want to turn this into a contest.
Second, it has the cool fade in effect just like the Clagnut photo fades demo. I did, however, take out the support for Safari, although it would only add on another two lines of code. No biggie. The Fade effect does work in safari.
Tooltip Usability
One other thing to note on the difference between Sweet Titles
and Nice Titles
is that I cut off the URI at 25 characters for the main reason of unwanted lengthiness. My main concern is that all I really need to know is the originating domain and on average, that’s what you’ll find in the first 25 characters.
No, there were no studies on how long the typical domain is or what users prefer to see. It was merely an educated guess that I figured was appropriate. If anyone has information otherwise, please let me know.
Another cool notable feature that Sweet Titles (as well as Nice Titles) has is that the JavaScript is unobtrusive which of course as we all know, in and of itself, improves accessibility.
How do I implement this on ‘my’ website
Please Note: The Following instructions have been deprecated
Simple enough. Just follow these steps:
Download the toolTipLib.js file and add it into the head of your document.Eg:<script type="text/javascript" xsrc="http://example.com/js/toolTipLib.js" mce_src="http://example.com/js/toolTipLib.js"></script>add these few functions to your js file.They include Scott Andrew’saddEvent()function and other useful functions that grab Event sources, attach window events, and take advantage of event flushing to take into account for IE’s memory leak. To make it simple you can just download the file and append it to your document the same way you did with the toolTipLib.js file or keep them separate the way I have them (preferred)Add the following CSS to your style sheet:
toolTip.css
/* Fading Tooltips */ div#toolTip { position:absolute; width:220px; background:#000; border:2px double #fff; text-align:left; padding:5px; -moz-border-radius:5px; z-index:1000; } div#toolTip p { margin:0; padding:0; color:#fff; font:11px/12px verdana,arial,serif; } div#toolTip p em { display:block; margin-top:3px; color:#f60; font-style:normal; font-weight:bold; }- Style the CSS as needed to fit your likings but be careful with the positioning (keep it absolute). And please, by all means, don’t make them look like mine. Be creative! That’s what this is all about anyway.
Why is the CSS separate from the JavaScript?
Because it should be. I believe keep the ‘look’ of the tooltip should be defined by CSS in your style sheet and not JavaScript writing out CSS. In a way it gives the developer more control and it is easier (for you) to maintain.
Why is the JavaScript in three (two) separate files!
Because keeping functions grouped separately is also what I advocate. Simply adding the event attachment functions to the toolTipLib just isn’t practical when I’m going to be using them several other places throughout my site.
If you like, you can put them all in one file if it’s that big of a deal. I’m fully aware I could have made this more plug ‘n play from the beginning, but this was a concious decision I’ve made on how I implement libraries. In the same manner that OpenRico extends the ProtoType library, we should all be doing similar techniques.
Enjoy Your Titles!
August 30th, 2005 at 8:49 pm
Dustin - - this rocks! I am already trying to figure a way to work it into my sites.
I have to agree with you on the need to keep the CSS seperate, as you stated: “it should be.” Far too often developers hide the ‘variables’ and unless you know where they can sometimes be more difficult to change. Thanks again this will be a nice addition to put in my designer toolbelt.
August 30th, 2005 at 9:07 pm
That’s cool Dustin, works nice and smooth for me on Firefox.
Does this automatically pick-up all anchors or do you specificy a certain class for it?
August 30th, 2005 at 11:00 pm
@James
Thanks for the boost of encouragement. Also, expect another post on “Keeping CSS Separate from JavaScript”. This will take a big chunk out of the “D” in DHTML. Typically, dHTML involves some combonation of manipulating the presentation layer with JavaScript yet we often tend to include this presentation manipulation in the behavior layer.
@Justin
Yes. It picks up all anchors. If you truly want it to be as flexible as Dunstan’s - then you’d simply attach the same event/function combo to all <abbr />, <ins />, and <del /> elements. If you look at the Tooltip library file you’ll notice it’s a very simple
getElementsByTagName()method being called. :)August 30th, 2005 at 11:45 pm
Looks like there’s some issues with IE (random, totally not helpful Javascript error), possibly related to the attribute accessor methods (getAttribute, setAttribute, removeAttribute, etc..).
Hey Mr. Wheel inventor, have you given a look to the Scriptaculous library? Lots of handy visual effects that can be applied to elements (cross browser compatible).
August 31st, 2005 at 3:47 am
Great. I wonder if it would be possible to apply the fade to a pure CSS tooltip also:
http://www.communitymx.com/content/article.cfm?cid=4E2C0
best wishes
Tony
August 31st, 2005 at 4:18 am
Dustin,
Nicely done! You’re quite the client-sdie master! I imagine I may use this myself on my own site (once I get it re-developed).
I don’t get the before mentioned error in IE, but I do notice that in Opera it works well, but Opera displays the HREF attribute in it’s own title-looking-display-box which sits on top of yours and hides it. No big deal to me, but I know your picky so I thought I’d let you know. :)
Jim
August 31st, 2005 at 6:44 am
Dustin - - No problem, I am actually showing this to a few buddies too, as they would love this on their sites.
Justin - - I see it too, I think it has to do with the tooltip positioning in the CSS. The tooltips are appearing just not in the viewable area. If you scrolldown and don’t see a tooltip it appears the position is higher on the screen. I bet it is a matter of doing the all familiar !important type tweak for IE.
August 31st, 2005 at 9:38 am
@Justin:
I might just have to look into setting the element.title to equal ” (empty string). Thanks for the small catch. Also, I might just have to take a look at the scriptiliciouis library. There’s always things that can be made better.
@Tony
Yes. The fading technique can be applied to it, but then it wouldn’t be a Pure CSS solution anymore…not to mention that this method stands alone on its own merit for the fact that it grabs your title attribtue and not some hidden span element. Needless to say, it doesn’t require ‘html hacking’. The CSS Tooltip also stands on it’s own for the fact that it works with just CSS. The worst thing that could happen on this end is that if someone has JavaScript turned off, they’ll still see the titles. :)
Choose one that suites you best.
@Jim:
I definitely want to check this out. Now that Opera 8.0 has fixed many DOM short-comings I’m willing to look into a fix for it. Any suggestions ;) (Hey, I know you’re quite the DOM master too)
@James:
Oh My! That’s what I get when I don’t test throroughly in a browser. I didn’t even think to scroll down the page further. This must be the way IE interprest the x,y cords. As you can see here:
Is that now how this is supposed to work? I’m getting the feeling that this original is very beta-ish.
I’ll get a better working version before not too long. Plus I’ll add in the fade effect back into Safari.
August 31st, 2005 at 10:11 am
Hey Dustin, just an idea I got from looking at the pure-CSS article Tony linked up.
Modify your Javascript to read all the titles of links and write out a span inside the anchro to facilitate the pure-CSS solution. That way the markup does not need to be modified but at the same time you can have very lean Javascript because all it does is read anchor’s titles and write them into a new child span. No need to bother with monitoring mouseover/mouseout events and collecting problematic X/Y coordinates.
Just a thought :)
August 31st, 2005 at 11:01 am
There is a small issue with the CSS solution. It requires that you set your links with a relative position. Although I was thinking of doing something similar before I got started, in the end I didn’t want to change any existing styles. also, the span element is not as robust as the div. Even when you apply
display:blockIE generally treats it a bit buggy when applying borders. However, you could still (with JavaScript) change the span to a div…and yes, this would solve the x/y issue.Hmmm…
August 31st, 2005 at 11:46 am
Hey Dustin, this is looking great so far! What was the reason for disabling it in Safari though?
August 31st, 2005 at 1:13 pm
Dustin know lika da Mac (just kidding Dustin)
August 31st, 2005 at 1:14 pm
Know as in no, just to let you know.
August 31st, 2005 at 1:25 pm
To address Jason, it should technically already be working with your latest version of Safari. What I originally meant to say is that it won’t work on legacy versions of Safari. See Cross Browser Transparency
August 31st, 2005 at 1:52 pm
That is really lame that you’ve got to use three different properties just to get transparency working in 3 browsers, at the same time that just shows the awesomeness of Safari that they support (yet another) CSS3 rule.
September 5th, 2005 at 6:43 pm
Dustin, lovely script! I can see this one spreading all over the place by non-scripters such as myself (Really need to get into DOM!). Just a query. Would it be possible to run this script to only pick up anchors in a certain place on the page?
For example just in a div with an id e.g #right? Or how about just in the tag where any links I would want the effect would go?
I just don’t want this effect on a menu or other elements I’ve already styled.
How bout if you already have an attribute for external links for validation, such as rel=”external”. I’d imagine this script most useful for external resources, as internal ones would just flash up the same domain as the URI, so would it be possible to just target them?
Many thanks for your work, big fan! Keep it up! :)
September 5th, 2005 at 8:44 pm
Andy, the answer to all your questions is yes. Of course it would take some modifications, and that’s where knowing how to manipulate the DOM would be beneficial. I figure what I’ve done is make it work ‘out of the box’ for a very generic solution. The script seems to address what ‘everyone’ might want. As for yourself, if you want to target a specific area, you could change the line of code
var links = document.getElementsByTagName('a');
to this:
var sideBar = document.getElementById('right');
var links = sideBar.getElementsByTagName('a');
If that’s to restrictive, then you can use my getElementsByClass() function to specifically target all the links you want, and then target those individual classes.
Eg.
<a class="tooltip" href="#">Link with Tooltip</a>
<a href="#">Link without Tooltip</a>
You get the idea?
If you wanted to target the external links you would just append this inside the for() loop:
if ( links[i].getAttribute(’rel’) == ‘external’ ) {As you can see, the original script is still very flexible to modify. :D
September 6th, 2005 at 4:56 am
Dustin your my hero! :) Thanks very muchly, I’m awaiting this book: http://domscripting.com/ to get into it.. I understand what’s going on, just was never any good at writing it!
Thanks for your work, and the tips! I’ll be sure to post my site when I get this implemented! :)
September 7th, 2005 at 8:02 pm
Just as an update, I’ve been playing around with this. I find that it works perfectly in any compliant browser, but that the results are a little haphazard in IE (surprise! ;) )
Therefore, since I don’t want tooltips appearing on the other side of the screen to where the link is, I’ve disabled support for it in IE, by way of a simple display:none in the CSS. Is there a better javascript way, that means only non-IE browsers apply this JS? Have you had any luck tweaking the CSS and making IE play nice?
Extra cool stuff for this script would be the ability to have diiferent styles pop up for different types of link… e.g. one set of styles for external links, and one set for internal.
I also found the fade in timer for IE was a little slow, so increased the increments of applied opacity to 20, and the final opacity to 90. Guess that’s a moot point now though!
September 7th, 2005 at 8:14 pm
Andy, I commend you for taking it upon yourself to add your own modifications :D. Many just make requests and expect another release. This tells me that I have achieved one of my intentions of allowing any developer to simply manipulate the script without much work.
On the deal with IE. I am still planning on implementing a fix for it. The method will alter slightly in the fact that I will grab the offsetLeft and offsetTop properties of the element in question as opposed to clientX and clientY. It might add a couple lines of code, but in the process, it will be cutting back a few too.
To implement ‘external’ vs ‘internal’ - just off the top of my head - append varying className properties depending on the rel attribute. Or, you could do a string match on the domain by simply hard coding your domain:
var domain = /^example.com$/;
if ( domain.match(location.href) ) {
links[i].className += ‘ internal’;
}
… or something to that effect.
On the opacity factor, be sure you don’t go past .9. Not for visual reasons, but because Firefox will cause a flicker once it reaches 1.0 at the end of the ‘fade-in’ effect. This was a verified and known issue among several developers.
September 8th, 2005 at 6:48 pm
Thanks for that Dustin! I decided not to implement the alternative styles for my site, but will definitely keep it in mind for future endevours! Thanks once again for taking the time out to answer my questions, and I look forward to a release with improved support for that bane of web developers, IE!
:)
P.S. I demonstrated the effect to a bunch of beta testers on one portal type site, and they loved it. Made for that extra user-friendly touch, so thanks!
September 13th, 2005 at 1:10 pm
[...] so everyone can benefit. It is available free to the public for use. View Dustin’s Fading JavaScript Tooltip and let me know what you think ! Update: there might be a quick workaround fi [...]
September 17th, 2005 at 9:10 am
Dustin,
I implemented this on my site yesterday and it’s working great. I did have a little bit of trouble getting it to load in the first place, but after I re-wrote the onload handler, it worked great.
You might want to check this out. PPK ran a contest to see who could re-code the cross-browser addEvent() function. I dropped in #5, (seemed to be the best) and your code still works fine. This resolves the problem of only being able to attach one event to a given handler.
I need to get in the habit of putting title attributes on all of my links now.
Also, is there a way to disable this script if the parent element has a title supplied. I’m sure I could figure it out if I thought about it, just wondering if you had any thoughts.
September 19th, 2005 at 10:26 am
You want to disable parent elements like <abbr /> as if there were a link it in? Off hand, yes, I’m sure you can…
If you were having issues with the onload… that was just a silly function I was using to avoid conflicts with other onloads. I’m thinking about just taking it out…
Thus, to implement the correct fix, just do this:
Change this (toolTipLib.js):
addLoadEvent(toolTipLib.attachToolTipBehavior);
To this:
addEvent(window,’load’,toolTipLib.attachToolTipBehavior,false);
Yea, it ‘does’ sort of get you in the habit of doing that. Once folks find that you have cool looking toolTip’s on your site they’re going to expect title’s in each and everyone. Also, funny thing you mention it because I had to go through my whole site and put titles in all the more important links that I thought folks would click on. All in all, it should be a best practice for accessibility reasons.
September 19th, 2005 at 7:38 pm
Dustin, this is really excellent! I have implemented this on a test website and it works like a charm! I like the fact that it goes by link position now, as no matter where the mousover occurs now, the box always appears in the same position! The last version meant that the boxes would often appear at different positions around the link. Even works in IE 5.x, nice!
Kudos!
September 20th, 2005 at 4:23 am
Very cool in FF, but it’s not working at all in the latest Safari for me. I’d love to otherwise use this on all sites.
Any ideas why?
September 20th, 2005 at 6:47 am
You might want to check out Squidfingers version of these tooltips. Much simpler but doesn’t have the fade in.
http://www.squidfingers.com/code/dhtml/?id=tooltips
September 20th, 2005 at 7:23 am
This isnt working for me. I’ve been sitting here for about an hour trying to figure out why. It’s probably something simple. Can someone check out this page?
http://designofdavidross.com
Thanks,
David
September 20th, 2005 at 8:04 am
Andy Beeching, could you post a link to your test site. I am having problems making it work… thanks!
September 20th, 2005 at 9:48 am
@Andy:
Thanks for the reference on someone else using it. It’s nice to know people are actually implementing it.
@Ryan:
Unfortunately I didn’t have Safari available to test on. I made sure I’ve done the best I can on using simple DOM 0-2 without going into any proprietary components of separate BOM’s (browser object model’s). Would you mind telling me what error you’re getting? Also, have you tried implementing the small fix with addLoadEvent in comment #24? Any other testers that wouldn’t mind looking into that issues? I’d like to get this working on at least the major desktop browsers…
@Brandon:
I’m not sure how much ’simpler’ it can be. Several folks here have this working on their site. I could in fact make it more plug ‘n play but I chose to keep things separate where they belong which involves a minor learning curve. Plus, the filesize of the toolTipLib.js file is around 1.8k… which isn’t bad at all. After looking at the other script, it’s about the same size. Some other tiffs with the other is that when I mouseover a link, my scrollbar moves up and down in IE6.
However all that aside, I mentioned before that there is probably already a thousand scripts that do something similar… but I mentioned my goals for this one in the article. If you like those goals as well, then this ‘be’ the one for you.
@David:
Many apologies. Please read the update that occurred Sept 15. You’re missing the element finder functions in findPosXY.js.
@Schey:
Did you miss the update too? I’ll update the original instructions.
September 20th, 2005 at 4:53 pm
[...]
davidbisset.com
JavaScript Fading Tooltips An “improvement” on previous tooltips with some CSS and Javascript… very, very nice.
[...]
September 21st, 2005 at 4:59 am
I like it a lot, cheers… I’d like to see the http://www stripped out of the beginning of the popup url, to save a bit more space. Implementing it myself, just thought I’d tip you off. Thanks again.
September 21st, 2005 at 5:02 am
Oh and I’d like to see “internal” links not show the URL too. Using this on http://www.folkestonegerald.com too. Cheers again!
September 21st, 2005 at 5:33 am
Dustin, I’m in love whith this script! Just one thing I came across which relates to an earlier comment I made. I have an XHTML strict site, and used an unobtrusive javascript from sitepoint to open links with rel=”external” in a new window. Couple this with your script which only applies to these links, and the sitepoint script won’t work anymore, plus the tooltips disappear.
Here’s the script: http://www.sitepoint.com/article/standards-compliant-world/3
September 21st, 2005 at 9:57 am
Would you mind posting how you captured the location to snap to the link? Pretty please?
September 21st, 2005 at 10:03 am
@All
To make any ammendments you’ll probably have to look into making your own modifications. At this point I’m only making updates that will improve the bullet-proofness. It needs to be a ‘one-size-fits-all’ script.
If you’re looking into doing external links you can do a simple check either on the target or a className…
var links = document.getElementsByTagName('a');for ( i=0; i<links .length; i++ ) {
if ( links[i].target == ‘_blank’ || links[i].className == ‘external’ ) // continue
}
not to mention, you could do the same with internal.
If you want to change the amount of characters that are shown in the href property, change the number ‘25′ to whatever you like on line 37. if you don’t want to see the http:// change the substring to say substr(6,25) (note difference on substring vs substr).
Good luck folks :)
September 21st, 2005 at 1:51 pm
Just wanted to let you know that this script breaks if the contents of the link is an image (or in general anything other than text). I’ve put up a simple test case on my site demonstrating this bug:
http://tantannoodles.com/code/sweet-titles/test-case.html
I came across this issue because I have some thumbnail images, and I wanted to use your fading tooltip script on them.
For some reason, it seems that the object being passed into toolTipLib.tipShow is the child object, and not the anchor tag object. But this doesn’t make sense to me, since the tipShow() is only attatched to the mouseover event of the anchor tag… not it’s children.
I have a feeling this has to do with event bubbles… I’ll let you know if I can figgure out a fix.
September 21st, 2005 at 1:59 pm
Joe,
Thanks for this catch. Yes, that is wierd and needs to be addressed as true bug and not an enhancement or feature. I’ll look into it and hopefully have a fix very soon.
One bug that I found that if you alert the anchor object you get the ‘href’ property and not HTMLLinkElement or HTMLAnchorElement. What doesn’t make sense is that ‘that’ is the default behavior in almost all major browsers. (Gecko, IE, Opera, Safari). But it’s wrong, right? At the least I should see [object] like any other element. For some reason browser makers have concluded that an anchor object is it’s href attribute which I think is incorrect. Anyway, that’s another topic.
Thanks again Joe for pointing this out.
September 21st, 2005 at 3:33 pm
Joe, I fixed the bug you mentioned. Many thanks. One of which was worthy to call for a second update. Please see above in the article body for the appropriate changes.
September 21st, 2005 at 9:35 pm
To all:
On the issues of Opera. Opera 7.2- will choke. I will in fact make an assumption that Opera users live on the edge and frequently update as often as possible. Thus on Opera 8.x+ the script is working just as intended minus the fact that Opera still throws in its own toolTips on top of these one’s. Very annoying if I was an Opera user. Aside from it, I’m not going to figure out how to fix it. After viewing it myself in the newest version 8.5 - it really wasn’t all that bad.
September 22nd, 2005 at 4:27 am
Just FYI, here’s what I did with the code
// could mix the next 3 lines into one, but leaving for clarity
var h = obj.href.toString();
var dPos = h.indexOf(’http://www.’);
h = ( dPos == 0 ? h.substring(11,h.length) : h ); // hard coded for efficiency
// now back to the original code!
var addy = ( h.length > 35 ? h.toString().substring(0,35)+”…” : h );
I’ve noticed something else along the lines of Andy’s experience above, I had a script already that ran through the links on a page inserting a “target=_new” if it was an external link etc, to get the functionality while keeping the code standards compliant (well mostly). This also inserted title tags where they were missing - this aren’t picked up by the sweet titles code though. Investigating myself, but wondered if anyone else had this. Code is all in place on http://www.clarkeology.com/blog/
September 22nd, 2005 at 4:29 am
This script is great, thanks! But is there any way to adjust it so that the tooltip only appears over links that have title/alt tags?
For example, go to http://www.colinmckinney.co.uk/test and look at my comment links etc
September 22nd, 2005 at 6:29 am
Any chance of seeing how you snapped to the link in a fixed position?
September 22nd, 2005 at 7:07 am
nm, I read the code, :-)
September 22nd, 2005 at 8:35 am
@paulie
I suppose the simplest thing would have just been to update the substr(7,25) (accounting for http://). They both work though. The potential problem I still see is linking off to ‘https’ websites.
@Colin
Take a look at the code. It’s fairly straight forward. Follow each method that jumps to another.
On the tipOver method simply check if there is a title attribute.
if ( !obj.getAttribute('title') ) return;@Stuart.
Thanks for diving in and checking it out!
September 22nd, 2005 at 10:12 am
Dustin, thanks for the IE fix, works very nicely now! :)
September 22nd, 2005 at 12:13 pm
[...] w. Since most of you are currently looking for employment, you may want to take a look. JavaScript Fading Tooltips - CSS and JavaScript to create hyperlink mouseover tooltips. Pretty slick! D [...]
September 22nd, 2005 at 1:38 pm
Hey folks, check out what Pauly has done with it. Nice work. And thanks for doing your own modifications :D
Paulys toolTipLib.js file.
September 23rd, 2005 at 2:32 am
Cheers Dustin, I’ve learned a few things from this
September 23rd, 2005 at 5:48 pm
hey love what u’ve done but I have a question. How would i make the tooltip pop up and display the title’s embedded in EM tags but with a different css style than is used for A tags?
September 25th, 2005 at 6:07 am
1 question.
First off, thanks a lot, the tooltips are great! But I have noticed, even on your site, the tooltips with no message just have ‘null’ as the text… is there a way to check for that and remove it, leaving just the URL?
September 27th, 2005 at 3:48 am
I’m spotting the “Null” thing too, on links that are wrapped around images only… did I miss an update?
September 27th, 2005 at 6:09 am
I did miss something. As you were!
September 27th, 2005 at 11:31 am
Thanks Pauly. if you do notice anything extremely quirky, please let me know.
September 28th, 2005 at 11:26 am
Great script Dustin!
Is there a way to make this work only for images with the alt tag instead? Meaning images without a link, but with alt tag, (Or images with title tag would make it more crossbrowser since Firefox doesnt display ALT).
I hoped I could only alter the :
var links = document.getElementsByTagName(’a');
to
var links = document.getElementsByTagName(’img’);
But it was not that simple, :D
Again, great script!
September 28th, 2005 at 12:15 pm
Hi Kim,
as you may have noticed, this is sweet “titles” and not sweet “alts” ;)
The goal was to replace titles since the correct behavior is to show a toolTip. To show a toolTip for alt attributes would be incorrect. IE actually gets it wrong in this case.
If you take a look at the script you’ll see that it does in fact replace title attributes with tip attributes.
Put up a test case URL and let everyone have a look.
September 28th, 2005 at 12:36 pm
Thanks for the reply Dustin, ill post a URL for you. I almost got it to work, that is - I got it to work in IE with images but it looks like Firefox won’t attach the onmouse events on the img element, proabably since its incorrect. In IE I also have to “erase” the ALT tag if I use the tootip, since as you mention IE has this wrong and will tooltip that aswell which results in two wonderful tooltips at once, :D
My main purpose for altering this fine script was to include more beautiful tooltips on images inside an admin system. For instance there are various alert lamps which lights from green to red and they have some explernation why in their title - however they are not links. I could wrap an a element around with a href=”#” but to me that looks abit over the top, since we are talking about having the markup as clean as possible, :D
I’ll play around some more, and post my findings shortly. Again, great script - normally I would use it just the way it is, but sometimes it’s so darn funny to tweak them just a little bit… As if we had all the time in the world for things like this, :D
September 28th, 2005 at 1:11 pm
After some puddling around I seemed to get it together, :D
http://kim.steinhaug.no/files/toolTipLib.js
Its true as you mentioned, this was supposed to be “sweet titles”, it still is except that its now “sweet image titles”, :D
Just switch this file with the one you have, the modifications are as follows :
* events are only added to images which has a title, lets refer to theese as tt-img (as in tool tip image)
* tt-img are stripped from title, to prevent firefox from displaying tooltip, and alt is stripped, to prevent IE to display tooltip.
* if a tt-img is wrapped with a link (a element) which cointains a title, the title is just for safety removed so we dont get any double tooltips.
Atleast this serves my purpose nicely, which is :
Giving a more visible tooltip to graphical icons which doesnt neccersarily are links.
Hope tihs can be of any use to other people, :D
September 28th, 2005 at 9:43 pm
Kim,
keep in mind that the comment in your file that says “I don’t see any use for this?”… everything in that file is there for a reason. One of the main goals was to make the script as short and quick loading as possible. If something doesn’t belong, then I wouldn’t have put it in.
The part you commented out will in the case of links will take care of the ‘wrong node’ problem. However since images can’t have childNodes (like links) you’d be better off just deleting the code rather than commenting it out. Just be sure that if you ever decide to implement the link titles back in to put that snippet back in.
You also have other area’s where you don’t see any “real” use for the particular sets of code… keep in mind other people will be looking at this as part of ‘My’ base code. I’d encourage you to at the least just remove the comments or change them to say something more appropriate like “Modification to suite image titles”
The uses were fairly obvious before the modifications so please take into account all those things.
On a more positive note, good handy work and taking the responsibility to modify it for your own needs. I commend those who don’t expect a free helping hand.
September 29th, 2005 at 12:55 am
You are absolutely right Dustin, the comments was mainly for myself comparing against the original code for links. I updated the file from the link above so no of the comments are in it any longer, :D
I really love the seperation of javascript in this script, you are probably familiar with the slayeroffice.org site, found a great way of doing nice checkboxes aswell :
http://slayeroffice.com/?c=/content/code/custom_checkbox.html
This is definitely the right way of doing things, clean and beautiful markup without trace of javascript - and for those not using javascript it still works the way its supposed to. Both are great examples I think.
October 1st, 2005 at 7:26 am
hi,
thanks for this nice tooltip classes! can I add your code to a GPL’ed CGI of mine?
markus
October 1st, 2005 at 10:04 am
markus,
Under the creative common lisence stated in the files. Yes, you may.
October 1st, 2005 at 11:22 am
Thanks for the superb script, Dustin.
As I use the Prototype framework so much, I’ve done a quick and simple port which uses Prototype methods in place of the methods in the extra .js files you supply:
http://insin.woaf.net/code/javascript/prototip.html
October 1st, 2005 at 12:08 pm
Hey Jonathan,
very nice. And great use of integration with Prototype. It shows the power of Prototype as a framework for plug’n play. Also thanks for the credits on your ProtoTip page. Well done.
October 4th, 2005 at 10:16 pm
Hi,
I’m just starting on a new personal website and was hopefully going to implement Dustin’s Sweet Titles into the site. But, I’ve run across a problem.
Have a look at:
http://designofdavidross.com/
If you scroll the text box down and hover over one of the test links you’ll see that the title displays much farther down the page than the actual link. I don’t know javascript well enough to figure out what’s going on or how to fix it. Does anyone here have any ideas?
There are some other problems I’ve encontered as well dealing with the sIFR in Safari so I may just abandon this design all together and go with a normal site that enlarges as content is added but if I can overcome these problems I’d like to stick with this design.
Thanks for any info, greatly appreciated,
David
October 5th, 2005 at 7:52 am
Hey Dustin, it looks great, i’m improving the js and i think it’s a nice ‘toque’ (touch) But i’ve got a problem… i wanna use it only in some links, not the whole page. Any suggestions?
thx
October 5th, 2005 at 9:32 am
Hi Robert,
Please look at the comments, that issue was discussed :)
October 5th, 2005 at 12:33 pm
I changed document.getElementsByTagName(’a'); to document.getElementsByTagName(’x'); and also the a in the web page, but it didn’t work.
btw, Sorry but i read the posts and i didn’t get how to apply the getElementsByClass() function.
Hope you can guide me.
October 5th, 2005 at 5:10 pm
In toolTipLib, I changed the loop up top to include an if to test whether or not a link has a title attribute, to rid yourself of the ‘null’ popups. :)
for ( i=0;i
October 5th, 2005 at 5:11 pm
Seems my previous comment was cut off:
if(links[i].title != “”){
That’s what I added.
October 6th, 2005 at 5:18 am
Yurivish, Dustin Diaz (common spanish last name, cool).
finally… ITs working! HA! first of all, i read something about JavaScript Functions, i know about asp and dot.net, and i decided to learn JS since 10′. Then i read the toolTipLib code, i undestood it and voilá! Thanks, thanks a lot.
Now i need to improve somthing new, i now i can use asp to validate vars, but i’m using js even for submit the form:
if (sub){document.promocion.submit();}
with firefox the submit works, but with windows xp sp2 doesnt. It’s a security problem, i know… but dunno the solution. I know also this is about Sweet-titles, so any Response.redirect to a new post would be appreciated.
Again, thanks a lot.
October 6th, 2005 at 3:11 pm
Dustin,
Thank you so much for the use of your tooltip library. I’ve struggled with the shortcomings of three other tooltip libraries before finding yours. I had to hack it a little to make it work in my environment, but all the hacking in the world wasn’t helping the other libraries. Plus yours is smaller!
As of 3am tonight (the next time I’ll be able to do a code push to our production servers) you’ll be able to see your tooltips in action on http://www.zvents.com.
Thanks again!
Tyler
October 6th, 2005 at 7:47 pm
[...] (which also saves) -I’ve updated the grid view and added tooltips based on the code available here -I’ve also added tags as a drop down. Permalink [...]
October 10th, 2005 at 9:19 am
Thanks for all your hard work on this one Dustin, we just implemented it on our homepage as a test (we really miss the use of flash on our homepage - but are trying to keep within a little more “web-standardy” look & feel at the moment).
Nice Work!
October 10th, 2005 at 3:39 pm
I’m trying this out as a tooltip for images, but I’m having a big problem in IE. If you’re moused over where the tooltip is going to show up, it just flashes and disappears. In Firefox it appears and then any mouse movement causes it to hide.
I know this is due to the browser firing the onmouseout event, but I haven’t figured out what to do about it. Unfortunately I can’t just forget about IE…this is the cleanest tooltip script I’ve seen. I’d rather make it work than go with something else.
Anyone else having this problem? Ideas?
October 10th, 2005 at 6:14 pm
Travis, I would still like to get this script to work with my original intentions of having the toolTip appear by mouse position and not element position. If anyone has found a good source for finding position x,y coordinates to the page that works in both IE and Firefox and in standards mode, let me know. The best source I found so far only worked in quirksMode found at Dynamic Drive. Of course the second you throw in a doctype, your mouse ‘page’ cordinates get nuked in Internet Explorer.
What I might possibly do to the script is add ‘official’ support for images which will attach a completely different method calculating image height into the toolTip position… these are just a few of my ideas ;)
October 13th, 2005 at 9:09 am
ey dustin im a huge fan of this script…my only question(well actually a bunch of questions) im looking to use this in my own site….i have downloaded the js files but im having trouble making it work….is there any way possible that you can send me or show me step by step code for this method…i would really appreiciate it…thanx mann
October 13th, 2005 at 10:21 am
Hi Obadiah,
Please read the post. It explains exactly what one needs to do. :) Several others have got it working without much difficulty. Good Luck.
October 13th, 2005 at 12:32 pm
I get this error from the CSS validator:
# Line: 132 Context : body div#toolTip
Parse Error - -moz-border-radius: 1em 1em 1em 1em;
What options do I have when trying to correct this error?
Thanks
October 13th, 2005 at 9:06 pm
david,
just take it out. I was using them as proprietary browser styles for mozilla. ( you know, so it looks good :) )
October 14th, 2005 at 12:37 am
Fading Tooltips mit Java Script
In der Statuszeile des Browsers wird wird angezeigt wie die URL eines Links ist. Die Tolltipps des Browsers zeigen dazu beim berfahren den Alt-Text. Eigendlich hat man so alles Infos die man dringend braucht. Wenn nicht ein aber wre …
Ersteinm…
October 14th, 2005 at 2:17 am
Dustin,
I know but I like the rounded corners. With IE specific styles I just place an ie.css style sheet in a conditional comment but I don’t know of a way to set up a separate stylesheet for Firefox only.
Too bad it’s proprietary and not just part of the css spec and there’d be no problem!
October 16th, 2005 at 4:09 pm
Obadiah, if you and Dustin don’t mind, I could help you. Or ill try. So, shoot dude. or contact me rrosset@gmail.com
If Dustin says no, don’t contact me.
October 16th, 2005 at 9:59 pm
Hey, I’m all for other members of the community helping others :). Have at it and help a brother (or sister) out.
October 17th, 2005 at 9:51 am
[...] so much so easy, including AJAX. See nice tutorial. And finaly, don’t we all want Fading Tooltips?
Lea [...]
October 19th, 2005 at 11:46 am
Thanks for the script! I’ve changed it so it is more functional now - you can see an example on RSS button (top right) and tag links on items here.
October 19th, 2005 at 12:57 pm
[...] k to Top" links Wired redesign turns 3 CSS color chart Jeremy Keith interview JavaScript Fading Tooltips Collaborative Tagging November 3, 2005 is World Usability Day (WUD) Deci [...]
October 19th, 2005 at 9:43 pm
[...] under: Programming — nortypig @ 3:45 pm JavaScript Fading Tooltips by Dunstin Diaz. [...]
October 22nd, 2005 at 6:00 pm
Thanks so much for a great (lean) script! The fade effect is very nice.
For those having trouble giving it a go, the solution may be as simple as rearranging the order of the script calls in the header. If you’re keeping them in separate files, make sure the event handlers come first. I wouldn’t know the difference, meself, but it worked. :)
October 22nd, 2005 at 10:19 pm
Robinson,
You are in fact correct. That could possibly confuse someone who is following the instructions verbatum. However from this point out I think everyone is just downloading the main zip file which allows you to plug away with something that already works.
Thanks for the look out though :)
October 24th, 2005 at 4:50 pm
nice. really.
only problem for me is not with script, but with viewing this page. when i hover over the little images on the right, i only see about 1cm of the left side of the tooltip and a horizontal scrollbar appears. of course, if i go down to scroll, the tooltip disappears :)
pretty major usability issue here, me thinks.
October 24th, 2005 at 4:52 pm
sunny,
I think that’s been my main issue as well. I am possibly going to release an ammendment to this script that will check the document width and fix the positioning accordingly. It just happened to be that nobody mentioned anything so I was putting that off for as long as possible.
October 25th, 2005 at 12:15 pm
Dustin, maybe this is what are you looking for? Make sure you examine carefully this part. I hope that will resolve your problems with findposXY, I don’t have the time to make my way through it (not today and not in a few days I mean).
Keep up the good work!
October 25th, 2005 at 1:30 pm
Sebastian, I’m already running something similar to that. What I really want is a mouse position finder - not an element finder. If anyone finds a good one, please let me know. Also thanks for the encouragement :)
October 25th, 2005 at 6:56 pm
hi, cool script!!
i missed 2 things
(1) dont display links/tooltip if no title-tag is there
(2) show the accesskeys in the tooltip
so i put some lines in the part, where you cruse thru the a-tags and create a css-class called (.aKey) to set the style for the accesskeys
for ( i=0; i AccessKey [' + links[i].getAttribute(’accesskey’) +’]'; // add accesskey-string}
links[i].setAttribute(’tip’, toolTipTmpTitle);
links[i].removeAttribute(’title’);
}
}
hope it helps someone
October 27th, 2005 at 4:54 pm
Here is a little fix for the DOCTYPE strict body.scrollTop issue you described. IN IE 6 strict and transitional DOCTYPES the BODY and HTML elements do not have a predefined height as they do in quirks mode. Therefore they do not fire an onscroll event and do not have a scroll top. By applying a little CSS the issue is quickly resolved.
HTML{overflow:hidden}
BODY{height:100%; margin:0; overflow:auto}
Brian Ernesto
October 27th, 2005 at 5:37 pm
Hey Brian,
You showed up just a couple hours late. The work around was in fact adding document.documentElement and not document.body :)
By my oh my, what a brain buster it’s been.
November 1st, 2005 at 2:45 pm
Great script! Im planning to use it in my new project, thanks allot!
@ Toni Ivanisevic, could you please tell me where i have to add your code? Just like you i don’t want to show the tipTool if there isn’t a title-tag. I hope you can help me out with this one.
Thanks for all the great thinking !
Kevin Steba
November 1st, 2005 at 3:51 pm
if ( element[j].getAttribute(’title’) == null ) { continue; }
November 2nd, 2005 at 9:32 pm
I see in the last few comments some javascript code that, if used, makes these sweet titles appear only when there is a title. But, I don’t know javascript at all and I dont know where to put the code in the file. Can someone explain in a way a 10 year old would understand? LOL.
Thanks
November 4th, 2005 at 9:23 pm
I saw your email about this script come through in the WSG group and got pretty excited hehe. I have been looking for something like this for ages, but had no idea it existed. I managed to get a background for it added in the css (still learning css)… very cool!
Thank you ever so much for offering this… I can’t wait to tell the ladies about it in the WordPress Learning Buddies yahoo group!!
November 12th, 2005 at 7:41 pm
[...]
The Mainbrace
blog
Sweet titlesin the wee hours
http://www.dustindiaz.com/sweet-titles/ Just like overlib but with a GREAT fade in. Also will automatic [...]
November 14th, 2005 at 2:45 pm
Thanks for this script. May I suggest next time you preserve the spacing in the css file for easy modifications. I’m scratching my head at why you crunched the code…It doesn’t save that much space.
November 14th, 2005 at 4:40 pm
Dave,
that is the normal way I write CSS. It’s method I prefer over elongated markup. Each rule gets a line… it really isn’t all that hard to understand.
And on the contrary, it does lots of space…especially when your style sheets get over 10k
November 15th, 2005 at 1:26 am
The web is built on great free scripts just like this one. This is an awesome script and its smart to keep everything separate, even if others do not realise how smart this is. Its clean, its graphical eye candy and its easy to install. I will keep watch over your site and your future designs. Good work!
November 15th, 2005 at 11:21 am
Thanks Kelly for the boost of encouragment. I’m glad it was easy for you to get working quickly.
November 16th, 2005 at 3:46 pm
Hi,
this is just superb. Great. :-)
Can i use this code in my site? :-)
I was also looking at the code.
What do i do if i dont want the tool tip to come on certain links ?
Regards
AB
November 16th, 2005 at 4:57 pm
Aninda, you may surely use this on your site. It is for all to benefit. As for the toolTip not showing up on certain links feature, it has been discussed by a few during the course of the comments. I’m afraid you’ll just have to take a gander at some of them.
November 17th, 2005 at 9:08 am
Thank a lot for letting me use this code.
Sorry about asking this again. I am totally lost in that code i have no idea about how to edit it and make it happen. Actually i am a designer and know javascript very little just trying to learn. So it will be a great help if you can explain this in a more simplistic way :-) or if you have a that code ready with you.. you send me please. :-)
Thanks
November 17th, 2005 at 8:55 pm
Hmmm, well I feel weird. I tried for about a half-hour to implement it. Damn! I can only assume my existing style sheet messed it up? Or .js file?
D
November 17th, 2005 at 9:03 pm
Daniel,
this shouldn’t be too difficult to get going. The styles are very uniquely named so they wouldn’t conflict.
Did you follow the instructions in the download file?
Be sure to add functionAddEvent.js first in your list of files to include.
Once that’s in, you can plugin the toolTipLib.js file. Lastly don’t forget to import the toolTip.css file or just plugin those styles into an existing style sheet.
November 17th, 2005 at 9:17 pm
Maybe there is a certain way that you have to place the div, p, and em tags around links?
looking at your code, and javascript programming in general, does not seem to care if my .js folder home is named /scripts etc.
I would get variations. Sometimes just like a multi layerd back-ground. Other times I would hover over the link get it nice and made and the link would disappear onmouseout
November 17th, 2005 at 9:18 pm
You are a good programmer btw. Are you implementing Xlinks?
November 21st, 2005 at 8:21 am
[...] vad los ejemplos: uno y dos. Descarga de los archivos para esta versión. Más: HoverHelp JavaScript Fading Tooltips Ref: torresburriel.com
« Anterior: Technorati
Sigui [...]
November 22nd, 2005 at 9:51 am
im currently using the rico library to add ajax functionality to my developmental site. the problem i run into is that while the script works for links directly specified on the page,
but when i use js to replace innerHTML, the script doesnt pick up the a tags and fire the tooltip. any ideas?
November 23rd, 2005 at 10:52 am
It’d be nice to adjust the position of the tooltip based on the visible view of the element, like when I’m at the bottom of the page, it’d be nice to show the tooltip above the element instead of below (like Netflix)
November 24th, 2005 at 4:21 pm
Ctran,
You must be still using an old copy of this script. update and get the newest. The toolTip does in fact stay above the page for links near the bottom. Try it out on this page with the links at the footer.
November 28th, 2005 at 12:04 am
The read-me file of Sweet Titles is corrupted
This is what you tell us to add to our script, but it doesn’t correpond to what is in the example source, because to link a script in the JS directory, we do not put a slash before it in the link.
It took me a while to find this and a non programmer or non html understander could reject this script because of that little error.
Be aware.
– EepP
November 28th, 2005 at 12:28 am
@EepP,
I’ve downloaded the file from this very page and the readme looks perfectly ok. Albeit I haven’t tested the readme on a mac. I figured .txt would work perfectly fine.
As for non-html folk…I suppose I wouldn’t have expected someone to even get this far if they didn’t know html. I’m sorry if this caused any troubles.
November 28th, 2005 at 11:45 pm
Is it possible to add images to the tool tip? :)
December 2nd, 2005 at 11:23 am
The read-me is just fine on a Mac.
December 4th, 2005 at 8:36 pm
There are problems with your script when there is flash on the same page when viewing with Firefox 1.5 on a Mac. It causes the embedded flash to disappear. Otherwise works well.
December 7th, 2005 at 9:25 pm
Awesome script. I spent most of the day trying to get my own working then found this, which is nicer, but has the same problem I was trying to fix in mine. If I scroll the page in IE, the tooltips don’t get positioned correctly; they are always at the top of the page. Is there an IE fix for this script? I found another script that has good positioning but it’s written so…cryptically…I haven’t been able to decypher it yet to merge. Also, is there a way to make it follow the pointer currently?
Thanks!
December 7th, 2005 at 9:29 pm
@Josh:
Yes, the fix is to use a doctype ;)
I assumed more advanced developers would find the script…which assume you practice developing with Web Standards.
Simply add doctype and your browser should jump into “Standards Compliant Mode” and treat the script correctly :)
December 12th, 2005 at 8:28 pm
hi, is it possible to have the width of the box vary depending on the length of the title? thanks.
December 12th, 2005 at 8:56 pm
Tin, the width in this case is used to determine whether or not it will fly off the screen. Thus 200px seemed like perfect number. Plus really long widths can deter readability…especially if you have an entire paragraph on one line.
December 13th, 2005 at 4:26 am
Very nice website, Dustin - and of course this solution is awesome =)
I was wondering about 1 thing:
Is it possible to remove the opacity to use an image for the background instead - or at least have a totally black background? I’d like to try both to find out what looks best on our website, you see. Opacity ruins it in this case [grins].
Keep up the good work!
-Charle
December 13th, 2005 at 12:08 pm
First off nice tooltips. I do see a problem though in IE. For those who use that browser, the tooltip is being stuck underneath the select boxes making the tooltip unreadable. I don’t believe there is a z-index fix, I think you have to hide the select boxes for the momment that the tooltip is visible.
December 14th, 2005 at 6:39 am
I saw others asking for exactly how to make this work for links with titles only, and not for those without - so here is where in the toolTipLib.js the code must change:
Find line 19, on new line add
if (current[j].getAttribute(’title’) != null &¤t[j].getAttribute(’title’) != ”) {
Find line 26 (previously line 25 if you added the above to code to a new line), on new line add
}This solution was given to me by Toni Ivanisevic whom I contacted via email due to the fact that I sucketh at javascript and I’d like to help those who share my intelligumence ^^
Dustin already answered how to do this, but us n00bs generally don’t understand a single line of c0d3, and far from what to do with it.
Enjoy folks - it’s a really cool creation.
Thank you, Dustin and Toni!
-Charle
December 20th, 2005 at 2:16 pm
Hi!
Any chance we could get this working with image maps? Doesn’t seem to work right now…
Thanks,
Andrew
December 20th, 2005 at 7:40 pm
You might get it working by doing these code changes in the toolTipLib.js, it’ll allow titles working for the area property in image maps. I got it working on our site: http://alventyr.net/maps.php
In the top part of the javascript, where it says something like
tipElements : [’a',’abbr’,'acronym’, ……you can add ‘area’ in there as well.
Next, find where the code says something like
if ( trueObj.nodeName.toLowerCase() == ‘a’ || trueObj.nodeName.toLowerCase() == ‘acronym’ || trueObj.nodeName.toLowerCase() == ‘abbr’ ||and just copy the part that says
|| trueObj.nodeName.toLowerCase() == 'abbr'and paste it, then change ‘abbr’ to ‘area’.
That should do it, methinks.
Charle
December 24th, 2005 at 4:05 pm
Hi Charlie
I have been trying to implement your modification to the code so that if a link does not have a title, there is no tooltip. I particularly wanted this, because I have removed the visible URL at the end of the tooltips, and a blank empty tooltip looks silly!
I have copied the code you have on your site. But when I test it on my hard-disk, it only works if there is title=”" in my link. If I remove that completely, the page seems not to complete loading in FF. You see the green bar continue. Its like the javascript is looking for something, and won’t allow things to finish loading if it is not there.
I see the same thing happening if I add the element ‘form’ to the script (so that I can display a tooltip within a form) and then do not have a form element on that page, the loading hangs, and the tooltips don’t work. When there is a form element on the page, it works fine.
Best wishes
Tony
December 26th, 2005 at 2:53 pm
Hey Tony
I’m sorry I can’t be of any more help than what I’ve written here. JavaScript isn’t my thing… The css code that displays the url, I changed that to display: none; and that’s the only thing I can think of that’d be different from our codes. Since my links are working fine when not using title at all I suggest you double and tripple check your js O_o
Good luck, man - and merry x-mas!
Charle
December 29th, 2005 at 4:03 am
Hi.
I liked the script and used it, but there is a little “bug” in it.
With Opera the tooltip can slip offscreen. With IE and Firefox it works fine.
Tnx.
Szu-c
December 30th, 2005 at 7:31 am
[...] lled one of my friends from Christian-Web-Masters.com’s project: Dustin Diaz’s Sweet Titles. So then i decided to write my own equivalent - somewhat improved of course (like i could m [...]
January 1st, 2006 at 3:10 am
[...] r people on that day before. :) Anyway, some changes were brought to this blog. Firstly, cool transparent tooltips were added to the ma [...]
January 1st, 2006 at 2:15 pm
[...] Back to Top” links Wired redesign turns 3 CSS color chart Jeremy Keith interview JavaScript Fading Tooltips Collaborative Tagging November 3, 2005 is World Usability Day (WUD) Decisio [...]
January 1st, 2006 at 5:42 pm
[...] kickass tutorial by Dustin Diaz on how to make fading javascript elements. Check it out [Dustin Diaz] Bring on the Ruby onslaught! A nice collection of Ruby resources [Loudthinking.com - Gettin [...]
January 3rd, 2006 at 12:29 pm
Hello,
I’m having difficulties setting up “sweet titles” on my webpage. I followed the instructions exactly, however nothing seems to happen. Is there something else I need to do that wasn’t already mentioned? If it helps, I’m using Dreamweaver to build my website and I have been previewing it in Firefox. Any help you can offer would be greatly appreciated.
-Andy
January 3rd, 2006 at 6:58 pm
[...] vaScript Fading Tooltips
Posted in Design by mheidzir on the January 4th, 2006
An “improvement†on previous tooltips with some CSS and Javascript… very, very nice.
[...]
January 4th, 2006 at 3:27 am
I still love the tooltips, and have them implemented with a small ‘i’ graphic background, and a second outer border bottom and right, to emulate a drop shadow. I’d like to find a way to add a third border, so that the grey shadow could be two-tone, and therefore more like a shadow.
best wishes
tony
January 5th, 2006 at 10:02 am
Excellent script Dustin and thanks for your help and additions Tony! Has anyone discovered a way to put a line break in the middle of tooltip text?
January 23rd, 2006 at 1:29 pm
[...] not always degradable. For example, looking back at my JavaScript fading tooltips known as Sweet Titles - albeit the code is unobtrusive, but the degradability is in fact an [...]
January 26th, 2006 at 1:48 pm
[...] v0.9.3 exchanged “nice titles” script with a slightly modified version of a smarter solution by Dustin Diaz added full scheme switcher support, based on Dustin Diaz&# [...]
January 28th, 2006 at 2:41 pm
[...] position until you mouseout of your element that fired the tooltip. When I was developing Sweet Titles I was keeping these two main things in mind. But one thing [...]
February 2nd, 2006 at 10:53 pm
[...] eans, 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 i [...]
February 3rd, 2006 at 8:32 am
[...] 20;nice titles” script with a slightly modified version of a smarter solution by Dustin Diaz (http://www.dustindiaz.com/sweet-titles) + added full scheme switcher support, based on Dustin Diaz’ absolutely GREAT ‘Unobtrusive Degradab [...]
February 3rd, 2006 at 10:11 am
[...]
February 3rd, 2006
Sweet Titles Test Page
Filed under: Cool
This is a Test of Sweet Titles
| Add to Del.icio. [...]
February 11th, 2006 at 1:22 pm
[...] ciki robiÄ…ce tooltipy i przy komentarzach pokazujÄ…ce przeglÄ…darkÄ™ i system piszÄ…cego. http://www.dustindiaz.com/sweet-titles - skrypt sweet-titles http://priyadi.net/archives/2005/03/29/wordpr [...]
February 13th, 2006 at 4:10 am
[...] zwozhere] Trackmania Nations from [Matt Brett] note: you need to check out this free game! Sweet Tiles from [Dustin Diaz] idGettr from [eightface] AtariBoy [...]
February 23rd, 2006 at 8:53 pm
[...] I promise, this will be my last post ever on for what seemed to have been something very cool in the beginning, has turned out to get the best of me. Yea, I’m talking about Sweet Titles. [...]
February 28th, 2006 at 7:52 pm
[...] Integrated modified version of Dustin Diaz’ Sweet Titles [...]
March 31st, 2006 at 1:12 am
[...] http://www.dustindiaz.com/sweet-titles [...]
April 15th, 2006 at 6:24 pm
[...] Also there’s a new toolTip in town called qTip. Appropriately named. We quickly moved onto something otherwise known as Sweet Titles which Dustin nonchalantly progressed to. [...]
April 30th, 2006 at 6:03 pm
[...] For anyone interested, I’ve taken Dustin Diaz’s handy Sweet Titles script, condensed all the relevant code into one document and tweaked it so that only anchor tags with the “title” attribute will display a rollover while the others display as normal. Feel free to grab it here. [...]
May 31st, 2006 at 8:05 am
[...] I recently changed my Word Press blog theme from Quentin to Antique old. The new theme has an excellent look, and it had some cool fading titles. I researched the code, and found that those titles are from a library called Sweet Titles. That library provides very nice effects on the titles of anchors and images. [...]
July 3rd, 2006 at 4:15 am
[...] Here we have an OO version of Sweet Titles that allows us to declare multiple instances of tooltips on separate elements with some optional configuration parameters you can pass into the constructor object to get that exact look and feel you want out of a tooltip. See Demo [...]
July 8th, 2006 at 5:54 am
[...] After the little complaint from scorpy in my guestbook, I also improve the links page, by introducing sweet title script to my blog. So what does this sweet title does? Basically it will shows a beautifully design black box with link name and title as below, when you hover on any link in my blog. I still have to re-adjust this sweet title to blend it nicely to my blog, please give me some time. [...]
August 1st, 2006 at 8:01 am
[...] i remember Sweet title , Nice title , Tooltip , BoxOver .. [...]
September 29th, 2006 at 7:45 am
[...] http://www.thinkvitamin.com/misc/yui-demos/demo-04.html http://www.thinkvitamin.com/misc/yui-demos/demo-06.htmlhttp://www.thinkvitamin.com/misc/yui-demos/demo-09.html http://www.dustindiaz.com/sweet-titles/ [...]
October 16th, 2006 at 8:21 am
[...] Kein wirkliches Plugin, aber dennoch eine Erweiterung für jedes Wordpress-Theme stellen die Sweet Titles von Dustin Diaz dar. Dabei wird mein Mouseover über einen Link eine Art ToolTip eingeblendet. Dieser ist dazu noch frei konfigurierbar, was Farbe, Schriftart etc. angeht. [...]
October 23rd, 2006 at 3:11 am
[...] Thanks, I’m using Sweet Titles, you can check it here. Two sites added! __________________ The Favicon Show [...]
November 2nd, 2006 at 11:28 pm
[...] If you’re developing for todays grade A browsers, then you can count on being able to extend Array through it’s prototype. But, since I have a natural love toward things that are sweet, I’ve already done it for you with sugar and spice. [...]
November 4th, 2006 at 12:39 am
[...] I´m proud to present “Sweet titles” on my site. [...]
November 9th, 2006 at 6:51 pm
[...] Dustin Diaz hat mit SweetTitles eine sehr elegante Lösung zur verbesserten Darstellung von Tooltips erstellt. Ich habe das JavaScript jetzt mal probeweise auch auf dieser Site eingesetzt und dabei noch mal ein klein wenig an meine Bedürfnisse angepasst. [...]
November 19th, 2006 at 2:19 am
[...] JavaScript Fading Tooltips [...]
December 4th, 2006 at 12:13 am
[...] JavaScript Fading Tooltips [...]
December 10th, 2006 at 6:52 am
[...] document.getElementById("object1").style.left = x + 15 + "px"; document.getElementById("object1").style.top = y - 5 + "px"; Aber wie gesagt, das Script ist konzeptionell völlig veraltet. Eine Alternative ist z.B. JavaScript Fading Tooltips Du solltest durchaus den standardkonformen Modus anschalten, indem du einen vollen DOCTYPE verwendest. So erreichst du, dass die Browser deinen Code gemäß den Standards interpretieren, das erleichtert dir die Entwicklung. [...]
December 14th, 2006 at 11:02 pm
[...] “Sweet Titles” supporting article [...]
January 9th, 2007 at 1:12 pm
[...] 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 das Script ‘Sweet Titles‘ von Dustin Diaz ziemlich cool und benutze es auch sehr gern. Nun, da ich vor kurzem den WS PicViewer veröffentlicht habe, dachte ich mir, ein weiteres cooles Script in mein WP einzubauen. Das PlugIn biete ich hier nun zum Download an. [...]
January 11th, 2007 at 5:50 am
[...] Seit Version 2.0 kann zwischen zwei verschiedenen Arten von Tooltips gewächselt werden, dazu muss eine kleine Änderung im Plugin erfolgen. Das Script Sweet Title dazu stammt von Dustin Diaz und ich habe es nur ins Plugin integriert, da der Wunsch von einigen lesern kam. [...]
January 22nd, 2007 at 2:20 am
[...] I’m currently working on better tool tips than Sweet Titles written by Dustin Diaz of Yahoo! fame. Dustin’s implementation embedded a hidden element that would be positioned absolutely and displayed at run time with the title text from the target element. It also creates a tip attribute on the target element and moves the content of the title attribute to the newly created tip element. I like these ideas and will likely borrow them. I like Dustin’s implementation as a proof of concept but it doesn’t perform so well (in my experience) on IE, which unfortunately constitutes a fair proportion of our client browser usage, and indeed the world, so its back to the drawing board. [...]
January 25th, 2007 at 6:35 am
[...] Für die Anzeige der Tooltips verwende ich im übrigen eine durch mich leicht modifizierte Version von Sweet Titles von Dustin Diaz (liegt auch im Original dem Plugin bei). [...]
January 26th, 2007 at 6:06 am
[...] JavaScript Fading Tooltips Sweet Titles 1.0, Documentation, JavaScript Files, CSS File [...]
January 28th, 2007 at 9:10 pm
[...] Sweet Titles [...]
January 30th, 2007 at 9:03 am
advance car cash loan title…
JavaScript Fading Tooltips…
February 7th, 2007 at 10:29 pm
[...] JavaScript Fading Tooltips Sweet Titles 1.0, Documentation, JavaScript Files, CSS File [...]
February 22nd, 2007 at 10:36 pm
[...] JavaScript Fading Tooltips posted by John at 9:25 am [...]
March 16th, 2007 at 6:28 pm
[...] Zur Darstellung von Tooltips benutze ich Sweet Titles. Es handelt hierbei um eine Java-Script Datei die man in sein Blog-Theme (oder auch Webseite) einbinden kann. [...]
March 19th, 2007 at 2:01 pm
[...] Sweet Titles : permettant l’affichage des bulles d’aide [...]
March 24th, 2007 at 2:13 am
[...] JavaScript Fading Tooltips [...]
March 30th, 2007 at 7:18 pm
[...] Sweet Titles : permettant l’affichage des bulles d’aide [...]
April 18th, 2007 at 1:48 am
[...] BubbleTooltips von Frank Bültge Frank hat dieses Plugin, wie er selber sagt, einfach mit ein wenig JavaScript und Cascading Stylesheets realisiert. Dabei wird JavaScript für die eigentliche (technische) Umsetzung genutzt und den Stylesheets kommt die Aufgabe zu, die Bubbles optisch an das jeweilige Design des eigenen Blogs anzupassen. Ab Version 2.0 seiner BubbleTooltips kann man sich sogar aussuchen, ob die Bubbles auf herkömmliche Art daher kommen sollen oder ob man stattdessen lieber die sogenannten ‘Sweet Titles’ verwenden mag. Letzere hat Frank einfach nur in sein Plugin integriert. Die ‘Sweet Titles’ stammen ursprünglich von Dunstan Diaz. Mehr Erklärungen und die genaue Anweisung zur Einbindung des Plugins findet ihr direkt auf den Seiten von Frank Bültge. Tags: SocialMedia, Web 2.0, WordPress. FaveThis? Diese Icons verzweigen auf soziale Netzwerke bei denen Nutzer neue Inhalte finden und mit anderen teilen können. [...]
April 19th, 2007 at 10:31 am
[...] JavaScript Fading Tooltips Sweet Titles 1.0, Documentation, JavaScript Files, CSS File [...]
August 31st, 2007 at 9:40 am
[...] Sweet Titles, tooltips semi transparente para los enlaces En XYBERNETICOS nos muestran a Sweet Titles es un script que nos permite generar en nuestros enlaces tooltips. Los tooltips son esos mensajes emergentes que vemos al poner nuestro cursor sobre un enlace determinado. En este caso los mostraremos en una caja emergente semi transparente muy agradable y que podemos personalizar a nuestros gustos mediante css. Puedes ver una Demo del efecto. [...]
September 30th, 2007 at 7:37 pm
[...] You can read about it here on the author site or here on google Also, why is there a separate CSS file http://akuhaus.googlepages.com/magazine-style_style.css [...]