Here’s what’s happening. The actual tooltips go into the markup at the end of a post rather than where you place the tippy shortcode. I did it this way because of issues with some nested block-level elements (in particular, a div inside a paragraph tag). The tooltip is set position: absolute and positioned accordingly. This means its parent element (usually .entry) needs to be position: relative. This often works fine, but there can be a problem if the tooltip link is inside a position: relative element.
In your case, your tooltip links are inside your .grid elements. When the jQuery code calculates the link’s position (in order to know where to place the tooltip), positions are calculated relative to .grid rather than .entry, since .grid is the closest relative element. This is why the tooltips are showing way too high: position is being calculated on a much smaller scale than it should be.
Two ways to handle this:
Remove relative position from .grid. This would be the easiest approach and if you don’t need those grid blocks position relative, that’s what I’d recommend.
It’s also possible to tell Tippy to use a different container when displaying the tooltip. This one takes extra work and still might not work quite right (if you want to try it, try it for just one tooltip and see how it does). Every div containing a tooltip would need either a unique id or a unique classname. You might call the first one something like <div id=”essentieeldocumenten” class=”grid one-fourth”> Then in the tippy tooltip itself, add a container attribute: [tippy title=”I’m a tooltip” container=”#essentieeldocumenten” This way, the tooltip will be displayed relative to the specified container rather than where it’s initially placed in the markup.
