tip position problem

The float itself isn’t directly causing the issue. Tippy stores tooltip data in hidden divs that it tacks on to the end of a post. Normally this works fine without causing a position issue, but in your case you have a div within your article, the div is floated to the right, and the div contains the tooltip links. Since the tooltip data is being tacked on at the end, it’s positioned outside the div and thus sets its position relative to the article, not to the floated div.

Possible fix:

This is a bit hackish and requires Tippy 6.1.0 which I released tonight. In your tooltip shortcode, add the attribute subtip=”true” – when Tippy is working with a nested tooltip, it places the hidden data right at the tooltip link. In your case, this is what you want, so even though you’re not using a nested tooltip, I think subtip=”true” will fix the problem for you. There are a few possible issues with putting the data right with the link: it’s stored in a block-level element (a div) and most browsers don’t like putting block-level elements inside things like paragraph tags, so it can potentially cause breaks in a document’s flow, but experiment and see if it works for you.

Please let me know if this takes care of it.

Chris, I upgraded the plugin and added subtip=”true” to the shortcode (using the text tab) and 2 things happened.

First, the tooltip seemed to show up in the expected position, well sorta. It was displayed in left-alignment under the word/link so the tooltip partially disappeared off to the right of the browser window because the text column I’m using it in is on the very right-side of the page.

Second, the tooltip broke the paragraph. So it wrapped to a new paragraph.

The second item is the issue with the block element inside a paragraph.

The browser cutoff is weird. I was able to produce that effect here and I’m not altogether sure why it’s doing that. I’ll have to look at it some more.

One thing you could do that would fix the tooltip position: remove subtip=”true” and remove position=”relative” from your floated div. Best I can tell, that div doesn’t need relative positioning and that’s what’s confusing Tippy (inspect your right sidebar and uncheck the position:relative; rule, then hover over Tippy). I came up with a way to position Tippy that would work in your situation, but it then breaks if the sub div is *not* relative positioned. Since most people probably won’t be using Tippy in quite the same setup you have, it seems best for me to keep it coded the way it is. If you can do without position: relative; in your .one_third .last element, that should fix the tooltip position.