New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different behaviour with body position set to relative #514

Closed
joedborg opened this Issue Jan 6, 2016 · 13 comments

Comments

Projects
None yet
3 participants
@joedborg

joedborg commented Jan 6, 2016

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

@louisameline

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Jan 6, 2016

Collaborator

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

Collaborator

louisameline commented Jan 6, 2016

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

@louisameline louisameline added bug and removed bug labels Jan 6, 2016

@joedborg

This comment has been minimized.

Show comment
Hide comment
@joedborg

joedborg Jan 6, 2016

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.

joedborg commented Jan 6, 2016

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 louisameline added the bug label Jun 14, 2016

louisameline added a commit that referenced this issue Mar 21, 2017

@louisameline

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Mar 21, 2017

Collaborator

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

Collaborator

louisameline commented Mar 21, 2017

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

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Mar 23, 2017

Collaborator

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

Collaborator

louisameline commented Mar 23, 2017

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

@thekrotek

This comment has been minimized.

Show comment
Hide comment
@thekrotek

thekrotek Jun 22, 2017

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?

thekrotek commented Jun 22, 2017

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

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Jun 23, 2017

Collaborator

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.

Collaborator

louisameline commented Jun 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@thekrotek

thekrotek Jun 23, 2017

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.

thekrotek commented Jun 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Jun 24, 2017

Collaborator

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.

Collaborator

louisameline commented Jun 24, 2017

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

This comment has been minimized.

Show comment
Hide comment
@thekrotek

thekrotek Jun 24, 2017

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.

thekrotek commented Jun 24, 2017

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.

@louisameline

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Jun 24, 2017

Collaborator

Your issue is very clear don't worry. The coordinates of the tooltip are deliberately relative to the body which is supposed to be at (0,0). You want it positioned relatively to another element, while this topic is about the body not being at (0,0) when it has a relative position.

Anyway, imagine that the parent you set or one of its ancestors has overflow:hidden: the tooltip could be partially hidden. And if there are z-indexes in the mix, it could also be covered by other elements. You might be ok with that, but I'm sure others will come and complain every day about their tooltip "not working". The benefit of this feature would be slim and not worth it in my opinion. But feel free to make it happen and even propose a plugin for it, it just won't make it to the core library.

Collaborator

louisameline commented Jun 24, 2017

Your issue is very clear don't worry. The coordinates of the tooltip are deliberately relative to the body which is supposed to be at (0,0). You want it positioned relatively to another element, while this topic is about the body not being at (0,0) when it has a relative position.

Anyway, imagine that the parent you set or one of its ancestors has overflow:hidden: the tooltip could be partially hidden. And if there are z-indexes in the mix, it could also be covered by other elements. You might be ok with that, but I'm sure others will come and complain every day about their tooltip "not working". The benefit of this feature would be slim and not worth it in my opinion. But feel free to make it happen and even propose a plugin for it, it just won't make it to the core library.

@thekrotek

This comment has been minimized.

Show comment
Hide comment
@thekrotek

thekrotek Jun 24, 2017

Well, you can always warn people about disadvantages of using parent option, right? The rest is up to them.

I feel a bit uncomfortable around JS. I'm more PHP/MySQL guy, so making a plugin or doing any changes to your script will take much more time for me.

Anyway, can this be fixed by calculating tooltip coordinates from parent container, not from 0,0 position?

You could even make this optional: use parents() function to search for parent container with position:relative and only then recalculating accordingly. I'm pretty sure it won't slow down the tooltip itself. I even could test it myself on my site, if you point me to the right place in your code, where coordinates are calculated.

thekrotek commented Jun 24, 2017

Well, you can always warn people about disadvantages of using parent option, right? The rest is up to them.

I feel a bit uncomfortable around JS. I'm more PHP/MySQL guy, so making a plugin or doing any changes to your script will take much more time for me.

Anyway, can this be fixed by calculating tooltip coordinates from parent container, not from 0,0 position?

You could even make this optional: use parents() function to search for parent container with position:relative and only then recalculating accordingly. I'm pretty sure it won't slow down the tooltip itself. I even could test it myself on my site, if you point me to the right place in your code, where coordinates are calculated.

@louisameline

This comment has been minimized.

Show comment
Hide comment
@louisameline

louisameline Jun 24, 2017

Collaborator

Don't edit the library itself. Check in the documentation how you can achieve custom positioning.

Collaborator

louisameline commented Jun 24, 2017

Don't edit the library itself. Check in the documentation how you can achieve custom positioning.

@thekrotek

This comment has been minimized.

Show comment
Hide comment
@thekrotek

thekrotek Jun 24, 2017

I found out, how to change the coordinates, yes. Here's my solution:

parent: ".custom-parent",
functionPosition: function(instance, helper, position) {
   	parent = jQuery(".custom-parent").parents().filter(function() { 
      		return jQuery(this).css('position') == 'relative'; 
  	}).first();
	    	
	if (parent) {
	  	arrow = position.target - position.coord.left;
        	position.coord.top -= jQuery(parent).offset().top;
        	position.coord.left -= jQuery(parent).offset().left;
        	position.target = position.coord.left + arrow;
        }
        
        return position;
}

Most of the time I've spent on positioning the arrow. Ended up in keeping the value between the target and left coordinate, which is suitable for TOP and BOTTOM arrow. For LEFT and RIGHT it should be top coordinate, I assume.

Didn't notice any slowdowns with this code. Still think, this should be done in library itself, when "parent" option is used. The code is very simple.

thekrotek commented Jun 24, 2017

I found out, how to change the coordinates, yes. Here's my solution:

parent: ".custom-parent",
functionPosition: function(instance, helper, position) {
   	parent = jQuery(".custom-parent").parents().filter(function() { 
      		return jQuery(this).css('position') == 'relative'; 
  	}).first();
	    	
	if (parent) {
	  	arrow = position.target - position.coord.left;
        	position.coord.top -= jQuery(parent).offset().top;
        	position.coord.left -= jQuery(parent).offset().left;
        	position.target = position.coord.left + arrow;
        }
        
        return position;
}

Most of the time I've spent on positioning the arrow. Ended up in keeping the value between the target and left coordinate, which is suitable for TOP and BOTTOM arrow. For LEFT and RIGHT it should be top coordinate, I assume.

Didn't notice any slowdowns with this code. Still think, this should be done in library itself, when "parent" option is used. The code is very simple.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment