In: , ,
On: 2008 / 04 / 15
Shorter URL for this post:

Go to your blog admin area, head to the "Write" page, move your mouse over the "Add media" tiny icons: you probably had noticed it already, WordPress 2.5 comes with a neat tooltip function. Using it in your own plugins is so easy that a hamster could do it.

First, in the HTML output of your plugin page, add a new classname — say "givemesometips" — to some elements, and give them a meaningful title.

  1. <p>The question mark hides a tooltip! <span class="givemesometips" title="Hello, I am a tip">?</span></p>
  2. <p>This image too! <img src="someimage.gif" alt="some image" title="I am a tip, too!" class="givemesometips" /></p>

Now, somewhere in your plugin page, add this Javascript call:

  1. <script type="text/javascript">
  2. jQuery(document).ready( function() {
  3.     jQuery('.givemesometips').tTips(); // tooltipize elements with classname "givemesometips"
  4. });
  5. </script>

And that's it. If your hamster cannot do this, consider upgrading it! For your convenience, here is a sample dummy plugin with tooltip examples in the page it creates under the Setting menu. Have fun!

Shorter URL

Want to share or tweet this post? Please use this short URL:


This entry "How-To: Use WordPress 2.5 Tooltips" was posted on 15/04/2008 at 11:28 am and is tagged with , ,
Watch this discussion : Comments RSS 2.0.

34 Blablas

  1. Cool advice, thanks for sharing. I just wrote "easily integrated tooltips" on my upgrading to wordpress 2.5 pro/con list. In the pro category obviously.

  2. […] WordPress. Go ahead, subscribe to our feed! You can also receive updates from this blog via email.How-To: Use WordPress 2.5 Tooltips Ozh has done it again! Have you noticed the cool little hover over tooltips on the WordPress 2.5 […]

  3. Thanks for the tips on these 'extras' but i prefer a good working version of wp 2.5 without the 'extras'.

  4. Tarun says:

    Cool tips.

    Thank you.

  5. Throx says:

    Thanks for the nice tips, I still need some time to figure out everything in 2.5.

  6. […] How-to add WordPress 2.5 Tooltips on Your Plugin by Ozh. […]

  7. Ronald says:

    Very good job Ozh. Very backwards compatible as well.

  8. sabbir says:

    thanks for the nice and easy follow tips.

  9. Gelay says:

    Thanks for the tip. Must try it out!!!

  10. WordZine says:

    ?? WordPress2.5 ?????…

    planetOzh ????????????????? WordPress2.5 ????????????????
    ????????????????????????? my_tTips???????? title ???

  11. martinsc says:

    very nice tip ;-)

  12. ketsugi says:

    Thanks for the tips! This'll come in handy.

    My only worry is that if we have too many plugins adding a custom class for tooltips (all of which call the same js function) might it not get a little crowded? Wouldn't it be easier if WP Core simply defined a specific class for us to use and we all used that same class?

  13. […] How-To: Use WordPress 2.5 Tooltips (tags: wordpress) […]

  14. john says:

    Great plug-in, thanks

  15. hufang says:

    very good ,i think it is simple

  16. Mark says:

    Nice and short! Its always amazing to see that with jquery nice effects are so simple to create.

  17. amolpatil2k says:

    Communism section is producing this error:

    Fatal error: Cannot use string offset as an array in /home/.batly/planetozh/ on line 163

  18. Kevin Paquet says:

    I don't really get what this is doing.
    Ahmm, what plugin page should I edit??

  19. Ozh says:

    ketsugi » There's no problem with this. Each plugin will define its own javascript applying tooltips on their own classname. One plugin page with class="mytip" and another plugin page with class="tooltip" won't interfere nor be loaded at the same time.

  20. Ozh says:

    amolpatil2k » Sometimes it breaks, yeah. I'll have to investigate :)

  21. […] How-To: Use WordPress 2.5 Tooltips « planetOzh (tags: wordpress jquery plugin tooltips webdesign) […]

  22. ketsugi says:

    Ozh, I have two concerns with that:

    1. What happens if two different active plugins use the same class name, each calling jQuery? Would that double the amount of Javascript work, or would jQuery be smart enough to not run again the second time?

    2. If 20 different plugins call the tooltip function on 20 different class names, wouldn't that be a tremendous waste of processor power and memory?

    To me it would make more sense that WP has a specific class name use to automatically tooltip-ize a tag, negating the plugin author's need to make a jQuery call at all.

  23. Ozh says:

    ketsugi » you don't get it.
    If you have 1000 plugins that each add their own admin page with lots of tooltips, you cannot anyway load 2 plugin page simultaneously. Can't go to options.php?page=myplugin and to options.php?page=thisplugin at the same time.
    And even if you had 20 plugins adding HTML content & tooltips on the same page, say the Write page, that would use something like 20 * 100 bytes (the js code) and 20 * 1ms (processor time used to parse document and apply tooltips to all the classnames)

    In short: there is no problem.

  24. […] PlanetOzh, come usare i tooltip di WordPress 2.5 per fornire informazioni […]

  25. […] PlanetOzh, how to use WordPress 2.5 tooltips to show useful info in your […]

  26. Anggie says:

    I'm still using wordpress 2.3 is it easy to upgrade to 2.5? Can you teach me how to upgrade my wordpress?

  27. Ozh says:

    Anggie » Sure:
    1) download latest
    2) unzip
    3) upload to your webserver
    4) that's it.

  28. Kym Huynh says:

    Hello! Just wanted you to know that you were mentioned this week on WordCast episode 9 :)

  29. Ozh says:

    Kym » Thanks for letting me know, I didn't know this podcast

  30. subcorpus says:

    i usllay use a plugin called … WordPress Automatic Update to do my updates …
    but this time i upgraded manually …
    all went well for the most part …
    some links broke … but were easy to fix …
    if anyone of you know how to get lightbox to work on 2.5 …
    plz do drop me a line on my blog …
    thanks …

  31. buzzknow says:

    its seems like already gone in wp 2.9 :(

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar and sign for a free account
Spam: Various spam plugins may be activated. I'll put pins in a Voodoo doll if you spam me.

Read more ?