How-To: Use WordPress 2.5 Tooltips

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!

34 comments

  1. Malte Landwehr

    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. Weblog Tools Collection » Blog Archive » How-To: Use WordPress 2.5 Tooltips

    […] 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. René van Gellekom

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

  4. Tarun

    Cool tips.

    Thank you.

  5. Throx

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

  6. Random WordPress 2.5 How-To’s :: WPLover

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

  7. Ronald

    Very good job Ozh. Very backwards compatible as well.

  8. sabbir

    thanks for the nice and easy follow tips.

  9. Gelay

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

  10. WordZine

    ?? WordPress2.5 ?????…

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

  11. martinsc

    very nice tip ;-)

  12. ketsugi

    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. Skylog » Blog Archive » links for 2008-04-16

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

  14. john

    Great plug-in, thanks

  15. hufang

    very good ,i think it is simple

  16. Mark

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

  17. amolpatil2k

    Communism section is producing this error:

    Fatal error: Cannot use string offset as an array in /home/.batly/planetozh/planetozh.com/blog/wp-content/plugins/youfave/wp_ozh_youfave.php on line 163

  18. Kevin Paquet

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

  19. Ozh

    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

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

  21. links for 2008-04-16 « RabiFoot

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

  22. ketsugi

    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

    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. Ultime dal fronte WordPress 16-2008: Sicurezza ed altro

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

  25. WordPress Weekly News, 15-2008: security and much more

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

  26. Anggie

    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

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

  28. WordCast | WordCast 9: Kym flies solo

    […] WP 2.5 tooltips […]

  29. Kym Huynh

    Hello! Just wanted you to know that you were mentioned this week on WordCast episode 9 :) http://www.wordcastonline.com/2008/04/22/wordcast-9-kym-flies-solo/

  30. Ozh

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

  31. subcorpus

    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 …

  32. Bitwire.TV » Blog Archive » WordCast 9: Kym flies solo

    […] WP 2.5 tooltips […]

  33. WordPress 2.5: Integrating Tooltips into your plugin

    […] Full Article […]

  34. buzzknow

    its seems like already gone in wp 2.9 :(

Comments are closed.