In: , ,
On: 2008 / 04 / 15 Viewed: 51995 times
Shorter URL for this post: http://ozh.in/hn

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: http://ozh.in/hn

Metastuff

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. 1
    Malte Landwehr Germany »
    thought, on 15/Apr/08 at 4:52 pm # :

    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. 2
    Weblog Tools Collection » Blog Arc... United States »
    pingback on 15/Apr/08 at 8:52 pm # :

    [...] 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. 3
    René van Gellekom Netherlands »
    replied, on 15/Apr/08 at 10:04 pm # :

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

  4. 4
    Tarun United States »
    wrote, on 16/Apr/08 at 12:49 am # :

    Cool tips.

    Thank you.

  5. 5
    Throx Australia »
    wrote, on 16/Apr/08 at 1:12 am # :

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

  6. 6
    Random WordPress 2.5 How-To’s :: W... United States »
    pingback on 16/Apr/08 at 2:09 am # :

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

  7. 7
    Ronald United States »
    said, on 16/Apr/08 at 4:54 am # :

    Very good job Ozh. Very backwards compatible as well.

  8. 8
    sabbir Bangladesh »
    replied, on 16/Apr/08 at 5:07 am # :

    thanks for the nice and easy follow tips.

  9. 9
    Gelay Bhutan »
    wrote, on 16/Apr/08 at 6:09 am # :

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

  10. 10
    WordZine China »
    trackback on 16/Apr/08 at 6:37 am # :

    ?? WordPress2.5 ?????…

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

  11. 11
    martinsc Israel »
    thought, on 16/Apr/08 at 6:44 am # :

    very nice tip ;-)

  12. 12
    ketsugi United States »
    commented, on 16/Apr/08 at 6:58 am # :

    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. 13
    Skylog » Blog Archive » link... Italy »
    pingback on 16/Apr/08 at 8:30 am # :

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

  14. 14
    john Indonesia »
    commented, on 16/Apr/08 at 9:08 am # :

    Great plug-in, thanks

  15. 15
    hufang China »
    said, on 16/Apr/08 at 10:56 am # :

    very good ,i think it is simple

  16. 16
    Mark Germany »
    thought, on 16/Apr/08 at 12:13 pm # :

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

  17. 17
    amolpatil2k India »
    thought, on 16/Apr/08 at 6:00 pm # :

    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. 18
    Kevin Paquet Philippines »
    commented, on 16/Apr/08 at 6:52 pm # :

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

  19. 19
    Ozh France »
    commented, on 16/Apr/08 at 9:52 pm # :

    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. 20
    Ozh France »
    commented, on 16/Apr/08 at 9:54 pm # :

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

  21. 21
    links for 2008-04-16 « RabiFoot United States »
    pingback on 16/Apr/08 at 11:41 pm # :

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

  22. 22
    ketsugi United States »
    commented, on 17/Apr/08 at 5:14 am # :

    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. 23
    Ozh France »
    commented, on 17/Apr/08 at 8:13 am # :

    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. 24
    Ultime dal fronte WordPress 16-2008: Sic... United States »
    pingback on 17/Apr/08 at 7:52 pm # :

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

  25. 25
    WordPress Weekly News, 15-2008: security... United States »
    pingback on 17/Apr/08 at 7:52 pm # :

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

  26. 26
    Anggie Indonesia »
    thought, on 19/Apr/08 at 2:34 pm # :

    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. 27
    Ozh France »
    wrote, on 19/Apr/08 at 5:10 pm # :

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

  28. 28
    WordCast | WordCast 9: Kym flies solo United States »
    pingback on 23/Apr/08 at 1:57 am # :

    [...] WP 2.5 tooltips [...]

  29. 29
    Kym Huynh Australia »
    replied, on 23/Apr/08 at 8:29 am # :

    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. 30
    Ozh France »
    replied, on 23/Apr/08 at 9:36 am # :

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

  31. 31
    subcorpus Maldives »
    thought, on 24/Apr/08 at 6:35 pm # :

    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. 32
    Bitwire.TV » Blog Archive » ... United States »
    pingback on 17/May/08 at 12:57 am # :

    [...] WP 2.5 tooltips [...]

  33. 33
    WordPress 2.5: Integrating Tooltips into... United States »
    pingback on 15/Apr/09 at 3:35 pm # :

    [...] Full Article [...]

  34. 34
    buzzknow Indonesia »
    said, on 24/Apr/10 at 11:34 am # :

    its seems like already gone in wp 2.9 :(

Leave a Reply

Comment Guidelines or Die

  • HTML: You can use these tags: <a href=""> <em> <i> <b> <strong> <blockquote>
  • Posting code: Post raw code (no <> &lt; etc) within appropriate tags : [php][/php], [css][/css], [html][/html], [js][/js], [sql][/sql], [xml][/xml], or generic [code][code]
  • Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar.
  • Spam: Various spam plugins on patrol. I'll put pins in a Voodoo doll if you spam me.
  • I will mark as Spam test comments, all comments with SEO names (ie "My Cool Online Shop" instead of "Joe") or containing forum-like signatures.

Read more ?