Tippy 5.2.0 brings with it a variety of new attributes and options related to positioning. This greatly increases the flexibility of where tooltips can be presented on the page.
First the options:
- Tooltip Location: Two new options available, absolute and fixed. They do as expected: the first will position the element absolutely based on its containing element (if the container is position: relative;). By default, the tooltip is contained in the body element. The second option sets the tooltip to position: fixed;. With both of these options, the position is then determined by the offsetX and offsetY values which have been part of Tippy for some time.
- Tooltip Container: As mentioned, the default container for the tooltip is the body element. If you want to change that – for instance, if you want the tooltip absolutely positioned within a container on the page – just add the element’s css selector here.
- position: per-tooltip specify the position value of link, mouse, absolute, or fixed.
- container: per-tooltip container specifier. Want one container in its default position but another tooltip in a specific container? You can do that here.
Here are some examples. In the space below I’m going to create an empty div:
Let’s say I have some that I want to within a specific container on my page; the new options and attributes make this possible. It can be specified globally or per-tooltip. Here is the shortcode for the first of these tooltips:
[tippy position="absolute" container="#tippy_demo_version" offsetx="0" offsety="0" title="tooltips" header="off" width="250"]Howdy, folks[/tippy]
Let’s say you want a tooltip to be , meaning it should stay in place when the user scrolls, that can be specified per-tooltip or globally. Notice for this one I also set autoclose=”false” so the tooltip doesn’t auto-close.
[tippy position="fixed" autoclose="false" offsetx="200" offsety="200" title="fixed"]I should still be here[/tippy]
I’ll be interested to see what people do with this. If you come up with creative uses, leave a comment or drop me an email.
Learn more about Tippy at the Tippy page.