Scrolling gear Scrolling gear Scrolling gear
Tippy for WordPress

Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site. For example:

See this link: .

Create a tooltip via the tippy shortcode. Here is the code that generates the above tooltip:

[tippy title="Hover on me"]I am a friendly Tippy tooltip.<br /><br /><b>Please do not fear me. I am nice!</b>[/tippy]

Install Tippy via Add New Plugin in your Dashboard or download it and move it into your plugins directory. Activate it, and you’re good to go! Be sure to check out the Settings page in your Dashboard (Settings -> Tippy) to select specific options.

To customize the look of the tooltip, copy plugins/tippy/tippy.css into your theme directory and customize it as you like or add styling rules to your theme’s main css.

Download
You can download Tippy from the WordPress repository.

Additional examples:

[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]
[tippy title="Per-tooltip size" width="300" height="200"]You can set the width and height of individual tooltips[/tippy]
[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]
[tippy title="UTF-8 support"] ¥ · £ · € · $ · ¢ · ₡ · ₢ · ₣ · ₤ · ₥ · ₦ · ₧ · ₨ · ₩ · ₪ · ₫ · ₭ · ₮ · ₯ <br /> å,ä,ö Å,Ä,Ö[/tippy]
[tippy title="Did you see that giraffe?"]
<img src="http://croberts.me/wp-content/uploads/2011/05/giraffe-208x300.jpg" alt="giraffe" width="208" height="300" class="alignnone size-medium wp-image-117" /><br />
A giraffe stretching at the zoo.<br />
This example shows you can include images inside Tippy.
[/tippy]
[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]
I am a friendly Tippy tooltip.

Please do not fear me. I am nice!

Be sure to check the news each day at one of the following sites:

BBC News
The New York Times

You can set the width and height of individual tooltips

You can use Weather.com to check your weather forecast.

¥ · £ · € · $ · ¢ · ₡ · ₢ · ₣ · ₤ · ₥ · ₦ · ₧ · ₨ · ₩ · ₪ · ₫ · ₭ · ₮ · ₯
å,ä,ö Å,Ä,Ö

giraffe
A giraffe stretching at the zoo.
This example shows you can include images inside Tippy.


563 Comments

  • Hi there, I’m using your plugin and it works like a charm.

    Is there any way to show a post content on a tooltip?

    I tried this, also using an other plugin to show the post content without sucess.

    [tippy title="Image" href="http://website.lol/" img="http://website.lol/image.jpg"]
    [post-content id=25]
    [/tippy]

    Plugin used(sry if it’s spam)
    http://wordpress.org/plugins/post-content-shortcodes/

    Thanks

    • It looks like this plugin has some problems with other shortcodes within the tippy shortcode.
      I’ve figured that out, because I also wanted to use shortcodes of another wp plugin with this cool plugin.
      The only way it is working so far is the following: let tippy be activated, but hardcode the code, tippy makes, yourself.

      What will work is the following:





      [plugin shortcode 1]
      [plugin shortcode 1]
      [plugin shortcode 1]
      [plugin shortcode 1]

      Just try it.

      • Damn, the comment does not allow html.
        Let’s try this:
        (I’ve subsituted “” with “\”)

        /div\/a id=”tippy_tip1_1_anchor”\//a\//div\
        /div\/a id=”tippy_tip2_2_anchor”\//a\//div\
        /div\/a id=”tippy_tip3_3_anchor”\//a\//div\
        /div\/a id=”tippy_tip4_4_anchor”\//a\//div\
        /div class=”tippy” data-title=”Title1″ data-href=”http://croberts.me/” data-anchor=”#tippy_tip1_1_anchor” \[plugin shortcode 1]//div\
        /div class=”tippy” data-title=”Title2″ data-href=”http://croberts.me/” data-anchor=”#tippy_tip2_2_anchor” \[plugin shortcode 2]//div\
        /div class=”tippy” data-title=”Title3″ data-href=”http://croberts.me/” data-anchor=”#tippy_tip3_3_anchor” \[plugin shortcode 3]//div\
        /div class=”tippy” data-title=”Title4″ data-href=”http://croberts.me/” data-anchor=”#tippy_tip4_4_anchor” \[plugin shortcode 4]//div\

  • I am using the plugin and all was working fine. However, the tooltips are now gone from iPad view. I have checked on 2 different iPads. The tooltips are there initially, but after a while the tips stop showing. The tooltips are in Tablepress, but they are still showing on a MacBook

    • Hi
      I have the same issue. The Tooltips disappear from the ipad. Initially they are there. I click on one, it works fine. I move to another page, move back again and they are gone. They have also disappeared when using my PC a couple of times but this seems to be more random, i.e. they don’t always disappear.
      Any ideas?
      thanks…

      • Evan
        May 28, 2014 at 2:01 pm in reply to Evan

        If you are using TablePress, as I am, I found that Tobias explained the reason why TP does this. I can’t find the post, but all I did was add “cache_table_output=false” as one of the commands inside the shortcode and Voila! No more disappearing ToolTips in Tablepress.

  • This is a fantastic plugin! It’s exactly what I was looking for with the hover text popups. Many thanks. I am using it on wordpress 3.8 and all seems fine except the youtube tippy does not seem to work. Even your example on this page doesn’t seem to function. Maybe this is due to my machine? I am using an imac that has maverick just installed. I also tried on another imac and on a windows machine but none would play the youtube in your example. They would show the picture of the youtube vid and all of the buttons but when you try to click the play button nothing happens. To make it even more interesting I tried your example on my ipad and it worked just fine! Any ideas about how to work with this?

    Also when I copy the tippy code above and paste it into my site I get the picture but it won’t play as described above but when I paste in a different youtube into the tippy code the popup shows the “2″ a blank space and then the “3.” Perhaps I am doing something very basic and very wrong? LOL

    Thanks so much for this great plugin.

  • Hello, I’m new with using WordPress and my question may sound stupid but I need help. I installed tippy and tried to use it into a post, but the following message appears all over again:
    “Warning: Invalid argument supplied for foreach() in /home/content/71/11607471/html/kristinarangelova/wp-content/plugins/tippy/tippy.php on line 458″
    Moreover the text that I try to put into the tippy window just doesn’t appear in the post.

    What should I do to avoid the error?

  • I tried to implement tippy and it worked fine on PC based browsers, but did not work on Safari or Chrome on an iPad. The hover on text was not displayed on those browser and since no text was displayed wasn’t available.

    Is this a know limitation?

  • Hi Chris, sorry but this is other question regarding using Tippy with image maps.

    The good news is I have successfully got this working, see this example http://governorsplace.co.uk/house/site-plans/

    When trying to replicate this method on another site
    http://www.seventelematics.co.uk/cctv-test-2/ I can’t get it to work.

    I have used the same code and same Tippy settings, can you give me any pointers to why it might not be working?

    Thanks

  • error log
    PHP Warning: Invalid argument supplied for foreach() in /home/xxx/public_html/wp-content/plugins/tippy/tippy.php on line 458

    // Loop through $attributes and make sure they are in self::tippyOptionNames
    // then add them to our data set
    foreach ($attributes as $attName => $attValue) {
    if (in_array($attName, self::$tippyOptionNames)) {
    self::addAttribute($attName, $attValue, $tippyId);
    }
    }

    this is Tippy Version 6.2.1, WP 3.8.1 multisite

    any idea what needs fixing?

    thanks for this great plugin

  • I really like this plugin, but I can’t figure out how to insert my PayPal code.
    The tip works except that the code is showing up instead of the PP button.
    Thanks in advance,
    Star Alexander

  • katrien moore
    April 3, 2014 at 6:20 am

    Hi,

    I am building a website that has 2 languages on some pages. I am using tippy to offer translation for some of the text. It is working beatifully, exactely what I need.
    I have how ever one issue, some of the text is on the far right hand of the page. When I open the tippy box, half of the text falls of the screen. Can you tell me how I can move the box a bit to the left?
    Thanks

  • Great tool, great thanks!

    How to define picture to have the pop-up window scaled automatically to sho all its content?
    Thanks!
    Maciej

  • Hey hey, i’m curious… has the IE Issue been fixed? I’m running into a problem where I have no text in IE…

  • Hello,
    It’s a great shortcode and very useful. I use it very succesfuly in the Graphene theme but I can’t make the shortcode work with the Tempera theme, any suggestions ?
    Thank you,

Leave a comment

Your email address will not be published. Required fields are marked *