Scrolling gear Scrolling gear Scrolling gear
Introducing Tippy 6.1.0

Tippy 6.1.0 has just been released with big fixes and two major(ish) new features.

Autoload content

The first new feature provides a way to change how tooltip content gets loaded. By default, Tippy automatically loads tooltip content when the page loads. The content is hidden from the user until they mouse over the tooltip, but it ensures that everything is ready to display without having to wait for images and such to load. This could cause a problem if you have something like a Youtube video that you want to autoplay when the tooltip is open. By automatically loading the content, any autoplay media will start playing after the page loads even if the tooltip is not displaying.

Tippy 6.1.0 provides two ways to fix this problem.

  1. You can change it site-wide under the Tippy settings page by unchecking the “Autoload Content” setting.
  2. You can also change it per-tooltip with the htmlentities attribute. If you set htmlentities=”true” then Tippy will convert the content to htmlentities which prevents it from autoloading. In other words, htmlentities=”true” is equivalent to turning off autoload.

for an example.

[tippy title="Check out vsauce" htmlentities="true" width="610" height="330"]<iframe width="580" height="315" src="//www.youtube.com/embed/7uiv6tKtoKg?autoplay=1" frameborder="0" allowfullscreen></iframe>[/tippy]

Nested tooltips

This is the biggest update. With Tippy 6.1.0, nested tooltips have become a reality. It is possible that Peter is the only person on the planet who will find a use for this, but his use is pretty cool so now he can do it. Here’s an example:

Nifty !

The code:

[tippy title="Nested Tooltips"]This is [subtippy title="my" header="false"]I am a happy [subtippy1 title="nested tooltip" header="false"]I'm another [subtippy2 title="one" header="false"]Keep it going![/subtippy2]![/subtippy1]. Do not fear me.[/subtippy] nested tooltip demo.[/tippy]

When nesting a tooltip, use [[subtippy]] instead of [tippy]. For multiple levels, just add a number at the end: [[subtippy2 title="My tip"]Whatever[/subtippy2]] Tippy doesn’t really care what number you use or if they are in sequence as long as they match.

One thing to keep in mind, and one gotcha:

Notice that hovering over any nested tooltip keeps the whole chain open. Because nested tooltips are inside their parent tip, hovering over the child will keep the parent open. Notice that this also means that if you drag a parent tooltip around, the child tooltips move with it.

The gotcha: for now nested tooltips will not work unless multiple tooltips are enabled in the global Tippy settings. This might change in the future.

Have fun, and let me know what you do with these!

<iframe width="580" height="315" src="//www.youtube.com/embed/7uiv6tKtoKg?autoplay=1" frameborder="0" allowfullscreen></iframe>
This is
I am a happy
I’m another
Keep it going!
!
. Do not fear me.
nested tooltip demo.

13 Comments

  • Dear Chris,

    that the nesting is added, is so fantastic and widens the potential and flexibility of tippy immensely.
    I think I am not the only one, who can see that … :-)

    I am right now on a trip in Nepal and internet connection is very slow. But when back home, I will immediately integrate the nesting, so you can see what I had in mind.
    To determine now also, what content autoloads or not, is another great feature. In fact one can place now a lot of content on only one page and can still keep the design clean.

    I am already now eager to know: Do all the shortcode parameters work also inside the subtippy ……. for example in the main tippy header=off, but in a subtippy header=on ?

    Regarding imgswap a suggestion : Right now the swap works perfectly, if 1. the pics have same size or 2.the imgswap is bigger than the first picture.
    But if the imgswap is smaller than the img, then there are results like in http://www.nil.is or in http://www.the.way.is/the-step-under-the-foot.
    Suggestion is to ‘clear’ the img before the imgswap comes.

    And another suggestion: To give the tippy an id-nr, so that it can be adressed like an anchor-link … like in a scenario: one tippy is open and in the content of the tippy it is possible to open on hover/click another already existing tippy.
    For example in one tippy opens a description and in the description there is a hover to a reference, that is already mentioned before in another tippy. This way the user doesn’t need to scroll or search for the reference.

    Just suggestions, Chris …

    Your plugin is truly a gift and utmost appreciated. Will donate again and hope that others will also honor financially your idea and efforts.

    Peter

    • I’ll check on those suggestions for image swap.

      As for the nested tooltips, yes, all attributes work. They are processed just like the main tooltip. I do have a few kinks left to work out – one item I changed to get nested working ends up breaking a number of other situations so I’ll have to figure out some sort of workaround.

  • Chris:

    htmlentities=”true” doesn’t seem to work for me:

    http://miracleofnature.org/examples/htmlentities-test/

    As you can hear, the audio file begins playing upon page load, in spite of adding the code.

    The code I’m using is as follows:

    [tippy title="Tippy Tooltip htmlentities test" class="myclass" header="on" width="650" height="300"]:

    [audio src="http://miracleofnature.org/wp-content/audio/eagle_bluffs.mp3" autoplay="true" htmlentities="true"][/tippy]

    ALSO … if I disable “Auto Content” in the Tippy settings, audio will not play at all. Not only that, but the tooltip contents get mashed. The text is missing and all I see is a portion of the audio file url.

    • Lang,

      I think I may know what’s causing the trouble. I’ll test a possible solution. It works fine when directly embedding media; I didn’t think about the (far more likely) scenario of using a shortcode.

      • Yes, it must work with the [audio] shortcode because that’s what large numbers of people will be using henceforth to embed mp3 files, now that the mediaelement audio player is in the core of WP 3.6.

        It would be terrific, too, if somehow the playback ended automatically upon closure of the Tippy window.

        **Concerning the weird appearance of the core audio player when placed in a Tippy Tip, I’ll see if I can come up with some custom CSS that makes it look better.

        • Pushing out Tippy 6.1.1 tonight which will fix the autoplay issue and along with the changes made in 6.1.0, any content will stop playing when the tooltip goes away.

          • Chris:

            I really look forward to trying 6.1.1 and will let you know how it works. And I promise to place htmlentities=”true” in the right place this time!

            Best Regards,
            Lang

          • Well, it doesn’t quite work.

            Adding the htmlentities=”true” indeed works, but now Tippy fails to display the new built-in mediaelement audio player. Instead it reverts to the browser’s default html5 player:

            http://http://miracleofnature.org/examples/htmlentities-test/

            Below is the code I’m using for the first Tippy example on the above page:

            [tippy title="Tippy Tooltip htmlentities test" class="myclass" header="on" width="650" height="300" htmlentities="true"]Here is an audio file embedded using html5 shortcode:

            [audio src="http://miracleofnature.org/wp-content/audio/eagle_bluffs.mp3" autoplay="true"][/tippy]

            In the second example, I removed htmlenties=true and also disabled autoplay. The browser default player still shows up.

            In other words, Tippy is not using the built-in WP mediaelement player when it sees the audio shortcode.

        • Also, htmlentities=”true” needs to go in the tippy shortcode if you want to specify this per-tooltip, whereas your example above has it in the audio shortcode.

      • One may use CSS to limit the width of the built-in mediaelementjs player to 280px, in which case it looks good:

        .tippy_tip .mejs-audio {
        width:280px !important;
        }

        However, I’m sure there’s a real fix somewhere that will allow the player to expand to 100% width of the tooltip and still look correct.

  • Hi Chris,

    in version 6.2.0: How to integrate in the shortcode alttrigger ?

    Thanks

    Peter

Leave a comment

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