Tippy for WordPress
204 Comments

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 me

To 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.9.0.zip

Additional examples:

News Links
1
2
3
4
5
6
7
[tippy title="News Links" header="off"]
<div style="padding: 5px;">
Be sure to check the news each day at one of the following sites:<br /><br />
<a href="http://news.bbc.co.uk/">BBC News</a><br />
<a href="http://www.nytimes.com/">The New York Times</a><br />
</div>
[/tippy]
Per-tooltip size
1
[tippy title="Per-tooltip size" width="300" height="200"]You can set the width and height of individual tooltips[/tippy]
Check the Weather
1
2
3
[tippy title="Check the Weather" reference="http://www.weather.com" header="on"]
You can use <a href="http://www.weather.com/">Weather.com</a> to check your weather forecast.<br /><br />
[/tippy]
UTF-8 support
1
[tippy title="UTF-8 support"] ¥ · £ · € · $ · ¢ · ₡ · ₢ · ₣ · ₤ · ₥ · ₦ · ₧ · ₨ · ₩ · ₪ · ₫ · ₭ · ₮ · ₯ <br /> å,ä,ö Å,Ä,Ö[/tippy]
Did you see that giraffe?
1
2
3
4
5
[tippy title="Did you see that giraffe?"]
<img style="margin: 5px;" src="/wp-content/uploads/giraffe.jpg" /><br />
A giraffe stretching at the zoo.<br />
This example shows you can include images inside Tippy.
[/tippy]
Youtube, anyone?
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]

columcille@gmail.com

Trackback URL: http://croberts.me/tippy-for-wordpress/trackback/
Short link: http://tcnr.me/xfe7h
204 comments
← Older Comments
181.
Jimena
March 15, 2012 at 6:45 pm
 

this is embarrassing. found it: http://croberts.me/2011/05/28/using-tippy-with-an-image/

 
182.
Ven. Pandita
March 16, 2012 at 7:00 am
 

Chris,

I am using Tippy in a way you have not intended—to show footnotes in an academic website. Tippy helps me to show the main text and footnote together, instead of the latter being placed at the far bottom. It is far more user-friendly than a mere footnote plugin, in my opinion.

However, I would like to make a request. If you can only make tooltips moveable by the user so that it is possible to read the main text without being concealed by the tooltip, it would be wonderful.

 
183.
Chris Roberts
March 16, 2012 at 5:20 pm
 

Jimena,

Glad you found it! :)

 
184.
Chris Roberts
March 16, 2012 at 5:21 pm
 

Ven. Pandita,

On whether or not I had thought of that use for Tippy, see my Annie plugin. :)

As for your suggestion, while something like that is possible, it’s a bit beyond anything set up in the plugin code right now and I’ve no plans to add it at this time.

 
185.
Gil
March 23, 2012 at 11:50 pm
 

This is great Chris. It fits what I need.

just one question, is it possible to place all the tooltip in the same place, in the right of the website? How?

Thanks!

 
186.
Chris Roberts
March 25, 2012 at 6:16 am
 

Gil,

That isn’t possible at this time.

 
187.
Tim Hanson
March 27, 2012 at 5:29 pm
 

Thanks, very nice plugin.

Chris can tippy execute shortcodes or php like a text or php widget.

I have been trying but not luck.

If no do you plan on adding this functionality at some point?

Thanks

 
188.
Chris Roberts
March 27, 2012 at 5:38 pm
 

Tim,

It currently won’t handle either, though having it handle shortcodes should be pretty simple. I’ll check into it and should have an update soon.

 
189.
Tim Hanson
March 27, 2012 at 7:00 pm
 

That would be a godsend, very cool.

 
190.
Daniel George
March 28, 2012 at 5:07 am
 

Hey Chris,

thank you very much for this great plugin. Could you give me a quick heads-up on two things:

1. Where can I change the Close-Link in the Tippy Box to another language?
2. How do I remove the small tooltip in the grey-box that shows up when I hover over the tippy-link for more than 2 Seconds?

Thanks,

Daniel

 
191.
Chris Roberts
March 28, 2012 at 11:13 am
 

Have just updated Tippy to 3.9.0 with two new features:

1. Nested shortcodes – add short code tags within Tippy. Note that this will often not work right – what Tippy has to do to content to get it to work in the Tippy link will often throw off what you expect to see from other Shortcodes.

2. A new option to specify the text of the close link.

 
192.
Chris Roberts
March 28, 2012 at 11:15 am
 

Daniel,

For your first question, update to 3.9.0 and specify the text you want on the Tippy Setting page in your dashboard.

For the second question, go to the Tippy Settings page and uncheck “Use title attribute in Tippy links” at the bottom of the settings page.

 
193.
Quint
March 28, 2012 at 11:45 am
 

Hello Chris,

I see that one could embed a Youtube video which is great. Is it possible to embed video stored in the WordPress Media Gallery or Amazon S3, etc?

Thanks,

Quint

 
194.
Chris Roberts
March 28, 2012 at 11:47 am
 

Quint,

That’s not something I’ve tested, so I can’t say for sure, but I don’t know why it wouldn’t work.

 
195.
Tim Hanson
March 28, 2012 at 10:13 pm
 

Chris,
I just used the new tippy w/shortcode, works great! had to play a little with firebug to get the css but so far love it.

THANK YOU
Tim

 
196.
Tim Hanson
March 29, 2012 at 9:01 am
 

Chris, is it possible to style the background color of a individual tippy, as in:
[tippy title="My Groups" header="off" background="red"]

The above does not work, hoping there is a method to do this.

Thanks
Tim

 
197.
Tim Hanson
April 3, 2012 at 8:15 am
 

Chris, I am using tippy with a shorcode and this part is working fine.

I am tiring to apply a JavaScript function to it:

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("div.domTip_tipBody.domTip_noHeader").mouseover(function(){
   jQuery("#yyy a.tippy_link").css("background-color","yellow");});  

   jQuery("div.domTip_tipBody.domTip_noHeader").mouseout(function(){
   jQuery("#yyy a.tippy_link").css("background-color","green");
 });
 });  
 </script>

but the js is not reading any of the tippy elements e.g “div.domTip_tipBody.domTip_noHeader” Though they do work in my style.css

Asking if you had any ideas on how to get the js to read the tippy elements, or if you can say this will not work (so I can give up tiring to get it to work)

Thanks
Tim

 
198.
Chris Roberts
April 3, 2012 at 9:41 am
 

Tim,

On your first question, on styling, there is no way to add styling in the short code, it has to be done via css. From your second question I’m guessing you figured that out?

On the second question, I’ll have to fiddle with that. Are you sure it isn’t matching the element? Could it be matching but not handling the mouseover/mouseout as you expect?

 
199.
Tim Hanson
April 3, 2012 at 7:44 pm
 

Chris,
The function is running with elements not outputted by tippy, I tested with ‘p’ in place of ‘div.domTip_tipBody.domTip_noHeader’ and it worked as expected.

I found a thread on a forum that had a similar question it suggested:

and a code snippet that might work using .delegate, my attempt at translating it is:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
 jQuery(document).ready(function($){
    $.delegate('p','mouseover', function(e){
        jQuery("#yyy a.tippy_link").css("background-color","yellow");
    });

    $.delegate('p','mouseout', function(e){
        jQuery("#yyy a.tippy_link").css("background-color","red");
    });
    });  
</script>

But dose not work even with the ‘p’ element, so I probably did not get the syntax right.

Dose this seem to you fruitful approach? if so can you see a syntax issue with it or is it just garbage and needs to be thrown out? (I know next to nothing about jquey)

Thank you for all your comments.

 
200.
Tim Hanson
April 3, 2012 at 7:46 pm
 

This part was left out of my comment above

I found a thread on a forum that had a similar question it suggested:

“This looks like a jQuery event delegation issue. If the new DOM elements are added after the page has loaded, jQuery wont read them. So you need to tell jQuery before hand to bind an event if any such element exists now or in future.”

 
201.
Tim Hanson
April 4, 2012 at 1:58 pm
 

Chris,
This works

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
add_action('wp_footer','myscript_in_footer');
function myscript_in_footer(){
?>
<script type="text/javascript">
 jQuery(document).ready(function(){
   jQuery("*").delegate("div.domTip_tipBody","mouseover",function(){
    jQuery("#yyy a.tippy_link").css("background-color","#392281");
    });
   
   jQuery("*").delegate("div.domTip_tipBody","mouseout",function(){
    jQuery("#yyy a.tippy_link").css("background-color","transparent");
    });
   });
</script>
<?php
}

I hope all this posting was not to annoying

 
202.
Tim Hanson
April 19, 2012 at 9:10 pm
 

Chris,

Is there a way to get tippy to close instantly when you mouse away, right now there is a lag time.

I tried changing “this.allowFreeze = true;” to “this.allowFreeze = false;”
(only guessing here) but made no difference.

Thanks
Tim

 
203.
Lonnie
May 3, 2012 at 10:54 am
 

I’m trying to place a fusionchart inside a Tippy tooltip, but when I publish my page (wordpress) the script tag that is used inside the tooltip is completed removed in the code. Is there a filter or something that keeps scripts from running inside a tippy tooltip? Thanks.

 
204.
Chris Roberts
May 7, 2012 at 10:49 am
 

Lonnie,

Nothing in Tippy automatically filters out scripts, but I’m seeing a similar issue where scripts cause a problem in the plugin. I’ve never tried including javascript within a tippy tooltip and will have to give it a closer look to see why it’s not working.

 
← Older Comments

Add a Comment

Please provide the following information. Fields marked with * are required. Your email address will be kept private. The following tags may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> .
*
*