Different behaviour with body position set to relative

[joedborg]

See https://jsfiddle.net/evnfpv9o/7/ and hash / unhash the body CSS rule and then see how the tool tips misalign.

[louisameline]

That's because of how the body works. When given a position, it is no longer "merged" with the document and the body is no longer at position (0,0) in the document if there is margin on it. I've always wondered why people would set up their page like this. You can wrap your page in a positioned div with margin to achieve the same result and avoid the issue. I'll look into a solution when I have some spare time. Thanks

[joedborg]

Thanks for the quick reply. It's if you're using 'absolute' within the body to get that to position relative to the body and not the entire page (unscrolled).

If you point me at the approximate place I can have a crack at fixing it.

[louisameline]

I suggest you add this to your code to fix the issue:

$.tooltipster.on('position', function(e){

	if(!e.helper.geo.origin.fixedLineage){

		var p = e.position,
			$body = $(window.document.body),
			mt = parseInt($body.css('margin-top')),
			ml = parseInt($body.css('margin-left'));

		p.coord.top -= mt;
		p.coord.left -= ml;
		p.target -= (p.side == 'top' || p.side == 'bottom') ? ml : mt;

		e.edit(p);
	}
});

https://jsfiddle.net/5xqqmrt6/46/

It's a quick fix if you're using the sideTip plugin and I probably didn't think it all through. Tell me if at least it works for you.
The tooltips may get displayed outside of the body since the library still rather takes the whole document into consideration to determine available space.
I'm not sure if I want to include a proper fix for this use case in the library itself, because I tend to think it's a bad idea to have position: relative on the body to begin with, so I don't really want to bother with its side effects. But I'm open to discussion to know if there actually are good reasons to do it before I call it a "won't fix". Thanks

[louisameline]

I have listed this issue in the troubleshooting section of the documentation (in the FAQ). It's probably enough now, thank you.

[thekrotek]

Just hit the same issue, but since I'm using a "parent" option with custom parent element, problem is not with body, but with one of the parent elements. In short, one of parent divs has position:relative set, which gives me incorrect positioning of the tooltip.

I'm not as super as you in pure JavaScript, so might take me a while to find out the root of the problem. Could you, please, add a fix for the same issue, but when parent is custom?

[louisameline]

It's not the same issue. Besides, you're using the parent option in the wrong way. That's why it's an undocumented feature, it will rarely do what you hope. There is almost no good reason to use it at all anyway.

[thekrotek]

Sorry to disappoint, but I'm using it the right way. I know very good, what I'm doing and why. This option works perfectly for me and does the job the way exactly I wanted it to.

And yes, it's the same issue, because, when you don't use custom parent, your parent is BODY, when you define "parent" option, your parent becomes every parent tag UP TO BODY. And if ANY of these parent tags has position set to relative, you will have tooltip positioning issue.

[louisameline]

If your parent is not at (0,0) in the body, it's expected that your "issue" happens and it has nothing to do with the body tag having the position:relative property or not. Is it at (0,0)?

The comment on the option says: "will default to document.body, or must be an element positioned at (0, 0) in the document, typically like the very top views of an app". So if your parent has a parent which has a relative position, I suspect that it's not at (0,0), and then no, you're not using it the way it was intended. Having any tag as a custom parent is a little complex and has more cons than pros so I won't make it an option.

[thekrotek]

You parent option works very well with any defined tag, not just the one positioned at 0,0. I've tested it thoroughly and the only issue I see is with position:relative definition. It doesn't matter, whether it's a BODY tag or any other - relative positioning of a parent tag breaks tooltip positioning. So yes, I think the nature of the issue is the same.

With parent option defined and one of the parent tags has relative position tooltip is placed to the very right bottom of the document, way over the "corrupted" tag borders. I also noticed, that when you turn on/off relative position, coordinates of the tooltip don't change. Guess, the only thing is changes here, is where these coordinates applied: to the BODY tag or to parent tag with relative position. I hope I explained it right.

Your parent option is very good and IT WORKS. I don't understand why are you so against it. The only thing it needs right now is this little issue to be fixed. I already "fixed" it by changing position to "inherit of that parent tag. Yet it would be better to have it fixed globally in plugin itself.