Scrolling gear Scrolling gear Scrolling gear
Introducing Tippy for jQuery

Tippy for WordPress is by far my most popular plugin in the WordPress repository with nearly 33,000 downloads. With my latest addition, Tippy will be easily available to anyone using jQuery, whether or not they use WordPress.

Tippy for jQuery is in many ways almost a complete rewrite of my Tippy script and it brings with it quite a bit of new power and flexibility. Global configuration options with per-tooltip overrides? Yep. Draggable tooltips? Of course. Multiple tooltips on a page? Not a problem. Multiple tooltips that auto show, remain visible, and can be drug around? I don’t know why you would want to do that, but it can be done. Check out the examples at the Tippy demo page.

Many of the features available in Tippy for jQuery are not yet in Tippy for WordPress. The next step will be to incorporate the new jQuery script into the WordPress plugin. I don’t have a timeframe in mind, but don’t expect it to take too long.

In the meantime, enjoy Tippy for jQuery!


  • Great news Chris!
    Thanks for your hard work.


  • Hi Chris,

    Tippy was updated from to v6.0.4 and i needed to rearrange many pages according to the new tippy plugin.
    Why ?
    Differently to the pre-jquery versions I face now a big issue. In tippy size and css of #pagecontent never limited or influenced the appearance of the tippy_tip.
    But now the #pagecontent is like the container for tippy and “cuts” the tippy, when offsetx or offsety point to a position outside of the container.
    I set already the z-index of the tippy-tip to 30000 but this doesn’t change anything.
    Also realized on another page of, that the tippy took the overflow-y:auto from #pagecontent although it is changed in tippy.css to ‘hidden’.

    Question: What do I need to do, that tippy works independently from the #pagecontent settings ?


    • I think I understand the issue you’re facing, and you might try changing the container setting. In the Tippy settings the default for container should be empty. Try setting it to body and see if that does what you’re wanting.

      For most people, moving Tippy inside the post content will be a good thing since it will match the post styling. But there are always exceptions. :) The container setting lets you move Tippy into any parent element so it will pick up the styling of that parent rather than the styling of the post.

      • Thanks for the quick response.
        I put body in the container settings – now the tippy appears fully, but the relative positioning to the tippy title is not valid anymore.

        • Figured out the problem, mulling over the best way to fix it.

        • Please try the update, 6.0.5, and see if that fixes it.

          • Yup… 6.0.5. fixed the issue.

            Truly amazing how you maintain the plugin … now I can go back to some former solutions where the whole pagecontent was covered by a nice tippy.

            Thanks so much for what you are doing.

          • Note that there will likely be another change coming to this. The way positions are calculated is a little tricky, and the way that works for you will likely not work well on a number of sites. I plan to add a new option, probably called “Calculate Position” which will have the option “document” and “parent” – parent will be set by default, you will want to change it to document. So look for that whenever an update comes out.

          • Excellent idea, Chris.

            Because tippy becomes more and more powerful, here are some suggestions to keep it for the user simple:
            Regarding the “switches” like ‘header’ or ‘autoclose’ one terminology only like “on/off”, “true/false” or “yes/no” and not a mix of them. Videojs is a good example – they only have “yes/no”.

            Regarding positioning : The offsetx and offsety for relative positioning only. For absolute positioning something like margin_x and margin_y – better would be a referencing to bottom, top, right, left. Otherwise it gets a bit confusing, especially if one overrides in a custom CSS the general setting.

            And here a wish list :

            I use tippy not only to add additional info, but to cover the whole page content with another content. I am not a fan of scrolling and paginated pages – so this is my way to deal with the “overflow”.
            Simple examples are or http://the … and the whole appearance is always checked on an ipad mini.

            For fitting the webdesign to both, small tablets the same way like huge monitors, I would actually like to define position, width and height of the page content in % instead of px, but cannot do it because tippy cannot adjust.
            So it would be also good to have the sizing and positioning of tippy not only in px, but also in % – this way one can easier adjust the whole design to tablets.

            And the biggest wish: a nesting possibility like
            [tippy title="Root Level"]content
            [tippysub1 title="Nested Level 1"]content
            [tippysub2 title="Nested Level 2"]content

            Then tippy would be extremely powerful and I could create pure one-page websites without any need for navigation.

            Just dreaming … definitely your plugin is one of the best in use and the download numbers and reviews confirm that.
            You really fulfill a need of the WP community and I hope, that the donations flow …



      • Just to let you know … the theme is a minimalist full screen theme for photographers with #supersized, where the #pagecontent is meant to be kept small.

        So for my design intentions the pre-jquery solution meant way more freedom for positioning the tippy.

  • Hi Chris,

    here a small CSS issue in

    For the text below the picture the tippy is done like that :

    [tippy title="how motion happens solely ..." swaptitle="how motion happens solely in the mind" width="520" height="480" offsetx="-150" offsety="-540" header="off"]


    If you hover over the title, then you will see, that the swaptitle doesn’t take over the color .

    Although I set the custom CSS for this page to h3 {font-size: 16px; font-weight:bold !important;}, it is not possible to make the tippy title bold.

    h3 is fine inside the tippy-content, but for the tippy-title it doesn’t work. Also ‘wrapping’ the tippy shortcode with shows no results.


    • Peter,

      Looking at this issue now, I’m having trouble duplicating the problem, though in my case I assigned a custom class to tippy: [tippy class=”mytip”…. So if I set a.mytip { … } it sets the style on the tip; likewise with a.mytip:hover { …} For the header in the tooltip itself, .mytip_tip .tippy_header sets that style.

      Note that whatever class you pass to Tippy gets applied to the link; for the tooltip, it appends _tip so .mytip becomes .mytip_tip

  • Hi Chris,

    regarding relative positioning another issue since the switch to jquery .
    With the tippy_tip would stay inside the browser window, even if offsetx or offsety would have hypothetically pushed it out of the window.
    Now this is not the case anymore.
    I think, this is quite important … especially for small tablets, where the tippy could otherwise end in the digital nowhere land.



Leave a comment

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