Scrolling gear Scrolling gear Scrolling gear
Tippy 4.1.0 and the new approach to images

People often ask how to use Tippy with an image. My normal approach is to point to a post I wrote a while back which lays out a straightforward but not necessarily easy approach, requiring users to hardcode the Tippy JavaScript onto their images. No more.

With Tippy 4.1.0, using Tippy on an image is as easy as specifying another attribute. If you want Tippy to trigger on an image rather than a text link, just set img to your image url. If you specify a title, that gets used for the image alt text. If you specify a class, that class is set on the image with _img appended, allowing you to style specific images. For example:

[tippy title="This is at the zoo" class="myGiraffe" img="http://www.croberts.home/wp-content/uploads/2011/05/giraffe.jpg"]Just something to demonstrate how to trigger Tippy on an image.[/tippy]

This produces:

Tippy 4.1.0 adds one additional new feature: the headertext attribute. Previously, the Tippy link and header both displayed whatever you specify for the title. Now, if you want the header to display something different than the title, use headertext. For example:

[tippy title="mouse over me" headertext="See? I'm different!"]This is my nifty tooltip.[/tippy]

This gets you: .

Head on over to the Tippy page for more info about this nifty plugin.

Just something to demonstrate how to trigger Tippy on an image.
This is my nifty tooltip.

12 Comments

  • Site not officially live yet. Can I put images into the pop up? My client wants me to put a map into the tippy.

    THANK YOU for updating tippy on images, that was also a request.

  • dirp… found it. I only saw that you could add a tippy TO an image but I see you can also add an image IN a tippy. Found it on the tippy main page. THANKS

    [tippy title="Did you see that giraffe?"]

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

  • Can I use Tippy on a post that uses a Featured Image? Since the post uses the post title as its alt text, I have no idea where to put the Tippy shortcode.

    • Tracy,

      I’m not sure what you’re trying to do – have Tippy show something on the featured image?

      • Chris,

        Thank you for the response. That is exactly what I wanted to do. Have a Tippy tooltip instead of the regular tooltip that just shows the title of the post.

        I do not need it now. The post that uses the image is being removed.

        I’ve not yet had a chance to use Tippy, but it looks to be a very useful plugin.

  • Hi Chris

    I love the tippy plugin, but I cannot make my link work. My Website is not up yet, I am working on it.

    Here just an ex: [tippy title="Appetizer recipe" reference="http://easy-cookingrecipes.com/hello-world/"header="on]This is delicious recipe![/tippy]

    I do not know what I am doing wrong. The box appears with the title & description, but as I look at your example, when I click on the title it takes me to your page, but my link is not working. I have very little experience with coding. Would you please help me with this.
    Thanks
    Lidy

    • Lidy,

      The only problem I see with your example is you don’t have a space before header=… It should be:

      [tippy title="Appetizer recipe" reference="http://easy-cookingrecipes.com/hello-world/" header="on]This is delicious recipe![/tippy]

  • Hi Chris

    I copy and paste what you send me but is not working at all, as soon as I cancel space before header is working but that is the way I had before. I am sorry but is it any way you can test this link.

    Thank you so much
    Lidy

  • Hi, I’m wondering if you can tell me how to implement the tippy plugin on images, when the images themselves link to another page. So if I click on the image it will take me to another page, but I want to be able to also have a tooltip come up, but keep my image as a link. Is this possible with Tippy?

    Thanks.

  • I am having trouble getting the tip to pop from the image. Is there anyway you can post the full code for the giraffe image? Much appreciated.

Leave a comment

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