Scrolling gear Scrolling gear Scrolling gear
Powerful New Positioning Options with Tippy for WordPress 5.2.0

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.

New attributes:

  • 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.

Howdy, folks
See how nifty this is?
I should still be here

2 Comments

Leave a comment

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