Tippy 6.1.0 has just been released with big fixes and two major(ish) new features.
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.
- You can change it site-wide under the Tippy settings page by unchecking the “Autoload Content” setting.
- 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.
[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]
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:
[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!