Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site. For example:
Hover on meTo form a tooltip you have to use the tippy tags. Be sure to notice in the above example that the tooltip can display HTML. The following line demonstrates how to generate the above tooltip:
[tippy title=”Hover on me”]I am a friendly Tippy tooltip.[/tippy]
To install, download and extract the following file into your WordPress plugins directory then activate it from your Dashboard plugins page. To customize the look of the tooltip look in your plugins/tippy directory and copy the file dom_tooltip.factory.css to dom_tooltip.css and edit the file dom_tooltip.css. You are advised not to edit dom_tooltip.factory.css or you will lose changes any time you update the plugin.
Download
tippy_3.7.3.zip
Additional examples:
News Links1 2 3 4 5 6 7 |
1 | [tippy title="Per-tooltip size" width="300" height="200"]You can set the width and height of individual tooltips[/tippy] |
1 2 3 |
1 | [tippy title="UTF-8 support"] ¥ · £ · € · $ · ¢ · ₡ · ₢ · ₣ · ₤ · ₥ · ₦ · ₧ · ₨ · ₩ · ₪ · ₫ · ₭ · ₮ · ₯ <br /> å,ä,ö Å,Ä,Ö[/tippy] |
1 2 3 4 5 |
1 2 3 | [tippy title="Youtube, anyone?" header="off" width="460" height="365"] <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/17jymDn0W6U&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/17jymDn0W6U&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> [/tippy] |
Short link: http://tcnr.me/xfe7h
Add a Comment
Recent Entries
Tech Talk
Projects
Archive
Tags
Dohp, this shows me something I need to tweak in the tooltip’s css.
In your style.css file (or in dom_tooltip.factory.css) can you add something like the following CSS rule:
div.domTip_Tip {
z-index: 10000;
}
i have added that to style.css and dom_tooltip.factory.css, still nothing.
All my tests indicate that should fix it. Do you have caching turned on with a plugin like WP Super Cache? Try resetting the cache. Sometimes that’s what keeps CSS changes from showing up.
I Dont have any pluggins that cache that i am aware of. I am running Akismet which;
“Used by millions, Akismet is quite possibly the best way in the world to protect your blog from comment and trackback spam. It keeps your site protected from spam even while you sleep. To get started: 1) Click the “Activate” link to the left of this description, 2) Sign up for an Akismet API key, and 3) Go to your Akismet configuration page, and save your API key.”
Can i edit Cache settings anywhere else that you are aware of?
Should be nothing else you have to tweak. This is odd, though – I checked your css and saw the rule, looks like it’s set up properly, but when I look at the tooltip in my DOM inspector, it doesn’t show the z-index rule. When I add it manually, it shows up.
I’ve just uploaded Tippy 3.7.3 which includes the css rule. Update to it when you see it and we’ll see if that does anything.
Its now working, thanks Chris
Thanks Chris for share it, its the best tool tip for wordpress that I have found.
Im trying to use php code inside of the tip, changing .html attribute by .load in the dom,
i need to implement a wp menu ¿any idea?
Amos,
If you are trying to use Tippy in a template file, this post might point you in the right direction: http://croberts.me/2012/01/23/using-tippy-in-a-theme-file/