What's the best way to customize HTML/CSS tooltips? (I mean an easy, cross-browser solution.)
I need to reduce the fade-in delay and change the style. (Also, could you suggest a good jQuery plug-in for it?)
-
If anyone coming across this is considering non-JS/jQuery solutions, have a look at this answer to a related question. Working fiddle: jsfiddle.net/4k90opzvAmos M. Carpenter– Amos M. Carpenter2015-12-14 05:39:30 +00:00Commented Dec 14, 2015 at 5:39
Add a comment
|
3 Answers
I have used qTip and the older version, Simpletip before and they work pretty well in all browsers (even IE6!).
The documentation is really good and you can configure the fade in/out delay: http://craigsworks.com/projects/qtip/docs/reference/#show
Style reference: http://craigsworks.com/projects/qtip/docs/tutorials/#styling
Comments
Using jQuery, you could get the title attribute of an object and add an element with that value. There is a little gem from jQuery: Novice to Ninja (SitePoint 2010). I am unsure if I am allowed to post it here, although the the code itself has been made public on sitepoint by the authors. Download the archive and see chapter_05\17_simple_tooltips. It's 25 lines long and works great.
1 Comment
I found this comment, and was interested in other code examples. SitePoint's github: github.com/spbooks
This is another tooltip plugin worth looking at, http://code.drewwilson.com/entry/tiptip-jquery-plugin
