{"id":799,"date":"2008-04-15T11:28:23","date_gmt":"2008-04-15T09:28:23","guid":{"rendered":"http:\/\/planetozh.com\/blog\/?p=799"},"modified":"2008-04-15T11:30:38","modified_gmt":"2008-04-15T09:30:38","slug":"how-to-use-wordpress-25-tooltips","status":"publish","type":"post","link":"https:\/\/planetozh.com\/blog\/2008\/04\/how-to-use-wordpress-25-tooltips\/","title":{"rendered":"How-To: Use WordPress 2.5 Tooltips"},"content":{"rendered":"

\"\"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.<\/p>\n

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

\n\n\t\t
\n\n\t\t
\n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
HTML<\/div>\n\n\t\t\n\t\t
\n\n\t<\/div>\n\t\n\t
\n\t\t
  1. <p<\/span>><\/span>The question mark hides a tooltip! <span<\/span> class<\/span>=<\/span>"givemesometips"<\/span> title<\/span>=<\/span>"Hello, I am a tip"<\/span>><\/span>?<\/<\/span>span<\/span>><\/<\/span>p<\/span>><\/span><\/div><\/li>\n
  2. <p<\/span>><\/span>This image too! <img<\/span> src<\/span>=<\/span>"someimage.gif"<\/span> alt<\/span>=<\/span>"some image"<\/span> title<\/span>=<\/span>"I am a tip, too!"<\/span> class<\/span>=<\/span>"givemesometips"<\/span> \/<\/span>><\/<\/span>p<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

    Now, somewhere in your plugin page, add this Javascript call:<\/p>\n

    \n\n\t\t
    \n\n\t\t
    \n\t\t\t\t\t\t< View plain text<\/span> ><\/a>\n\t\t\t\t\t<\/div>\n\n\t\t
    HTML<\/div>\n\n\t\t\n\t\t
    \n\n\t<\/div>\n\t\n\t
    \n\t\t
    1. <script<\/span> type<\/span>=<\/span>"text\/javascript"<\/span>><\/span><\/div><\/li>\n
    2. jQuery(document).ready( function() {<\/div><\/li>\n
    3.     jQuery('.givemesometips').tTips(); \/\/ tooltipize elements with classname "givemesometips"<\/div><\/li>\n
    4. });<\/div><\/li>\n
    5. <\/<\/span>script<\/span>><\/span><\/div><\/li>\n<\/ol>\t<\/div>\n\n<\/div>\n\n

      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<\/a> in the page it creates under the Setting menu. Have fun!<\/p>\n","protected":false},"excerpt":{"rendered":"

      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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[297,245,277],"class_list":["post-799","post","type-post","status-publish","format-standard","hentry","category-published","tag-tooltip","tag-wordpress","tag-wordpress-snippet"],"_links":{"self":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/799","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/comments?post=799"}],"version-history":[{"count":0,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/posts\/799\/revisions"}],"wp:attachment":[{"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/media?parent=799"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/categories?post=799"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/planetozh.com\/blog\/wp-json\/wp\/v2\/tags?post=799"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}