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

Positioning tooltip on edge case #6713

Merged
merged 7 commits into from Feb 6, 2013

Conversation

Projects
None yet
8 participants
@ghusse
Contributor

ghusse commented Jan 26, 2013

  1. Position the arrow in front of tooltiped element
  2. Move the tooltip according to its real size (when resized on display)
  3. Move the tooltip inside window when possible.

Before:
before

After:
after

Show outdated Hide outdated js/bootstrap-tooltip.js

@fat fat merged commit ee71fb4 into twbs:2.3.0-wip Feb 6, 2013

1 check passed

default The Travis build passed
Details
@fat

This comment has been minimized.

Show comment
Hide comment
@fat

fat Feb 6, 2013

Member

thanks for the help man - very appreciated

Member

fat commented Feb 6, 2013

thanks for the help man - very appreciated

@ghusse ghusse deleted the ghusse:2.3.0-wip branch Feb 6, 2013

@raulferras

This comment has been minimized.

Show comment
Hide comment
@raulferras

raulferras Feb 8, 2013

Whoa, nice fix!

raulferras commented Feb 8, 2013

Whoa, nice fix!

@globetrotterdesigns

This comment has been minimized.

Show comment
Hide comment
@globetrotterdesigns

globetrotterdesigns Feb 12, 2013

My tool tips don't work anymore in position.. They used to be at the bottom, but now they are at the top. It's like this on the bootstrap page as well..no matter what position your tool tip is in, it's at the top..?

globetrotterdesigns commented Feb 12, 2013

My tool tips don't work anymore in position.. They used to be at the bottom, but now they are at the top. It's like this on the bootstrap page as well..no matter what position your tool tip is in, it's at the top..?

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Feb 12, 2013

Member

@storefrontsocial: that's #6832

Member

cvrebert commented Feb 12, 2013

@storefrontsocial: that's #6832

@avernet

This comment has been minimized.

Show comment
Hide comment
@avernet

avernet Aug 12, 2013

On 2.3.2, I am not observing any "smartness" regarding where the tooltip/popover is placed. As illustrated in the screenshot below, if the control is close to the top of the viewport, part of the popover is invisible:

screen shot 2013-08-12 at 4 21 06 pm

You can also run this for yourself with this jsFiddle. I expected that in this case the popover would show lower, as alluded to in this screenshot (taken from @ghusse 's first message):

screen shot 2013-08-12 at 4 23 03 pm

Am I missing something? And to be clear, I am not talking about the auto placement implemented in Bootstrap 3, but "just" sliding the tooltip/popover to the right/left or top/bottom so it is visible, and adjusting the arrow so it still points to the control.

avernet commented Aug 12, 2013

On 2.3.2, I am not observing any "smartness" regarding where the tooltip/popover is placed. As illustrated in the screenshot below, if the control is close to the top of the viewport, part of the popover is invisible:

screen shot 2013-08-12 at 4 21 06 pm

You can also run this for yourself with this jsFiddle. I expected that in this case the popover would show lower, as alluded to in this screenshot (taken from @ghusse 's first message):

screen shot 2013-08-12 at 4 23 03 pm

Am I missing something? And to be clear, I am not talking about the auto placement implemented in Bootstrap 3, but "just" sliding the tooltip/popover to the right/left or top/bottom so it is visible, and adjusting the arrow so it still points to the control.

@ghusse

This comment has been minimized.

Show comment
Hide comment
@ghusse

ghusse Aug 13, 2013

Contributor

This feature was implemented on tooltips, not on popovers. That's why you
cannot observe it on your example.

Contributor

ghusse commented Aug 13, 2013

This feature was implemented on tooltips, not on popovers. That's why you
cannot observe it on your example.

@cvrebert

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Aug 13, 2013

Member

Erm, popovers are built on top of tooltips...

Member

cvrebert commented Aug 13, 2013

Erm, popovers are built on top of tooltips...

@ghusse

This comment has been minimized.

Show comment
Hide comment
@ghusse

ghusse Aug 13, 2013

Contributor

Ok. :-)

Not sure that the two examples are the same. Your screenshot shows a popover too large to be displayed on the page, its top is hidden.

The initial example from my screenshot does not corresponds to this case.

bootstrap

In the case I fixed, the tooltip was positionned correctly (but not the arrow). In your case, the popover needs to be repositionned.

Contributor

ghusse commented Aug 13, 2013

Ok. :-)

Not sure that the two examples are the same. Your screenshot shows a popover too large to be displayed on the page, its top is hidden.

The initial example from my screenshot does not corresponds to this case.

bootstrap

In the case I fixed, the tooltip was positionned correctly (but not the arrow). In your case, the popover needs to be repositionned.

@avernet

This comment has been minimized.

Show comment
Hide comment
@avernet

avernet Aug 13, 2013

@ghusse Got it; but then, how did you get your tooltip/popover to show "lower" in your example? Are you just using CSS? Say, if I naively add a .popover { top: 0 !important; } to my earlier example, the popover won't get out of the viewport, but the arrow still won't be positioned correctly (updated jsFiddle):

screen shot 2013-08-13 at 10 07 36 am

avernet commented Aug 13, 2013

@ghusse Got it; but then, how did you get your tooltip/popover to show "lower" in your example? Are you just using CSS? Say, if I naively add a .popover { top: 0 !important; } to my earlier example, the popover won't get out of the viewport, but the arrow still won't be positioned correctly (updated jsFiddle):

screen shot 2013-08-13 at 10 07 36 am

@ghusse

This comment has been minimized.

Show comment
Hide comment
@ghusse

ghusse Aug 13, 2013

Contributor

The trick is that the target element is positioned on the right of its
container. That's why the tooltip is compressed (by the browser). No CSS
magic involved.

Contributor

ghusse commented Aug 13, 2013

The trick is that the target element is positioned on the right of its
container. That's why the tooltip is compressed (by the browser). No CSS
magic involved.

@avernet

This comment has been minimized.

Show comment
Hide comment
@avernet

avernet Aug 13, 2013

@ghusse I must be missing something. In bootstrap-tooltip.js#L203, you're computing arrow delta as actualHeight - height, where height is the tooltip offsetHeight it is positioned, and actualHeight its offsetHeight it is positioned (top/left set). But in which case would the offsetHeight change? I don't see, as whatever I am trying to imagine, I am always getting an delta of 0.

avernet commented Aug 13, 2013

@ghusse I must be missing something. In bootstrap-tooltip.js#L203, you're computing arrow delta as actualHeight - height, where height is the tooltip offsetHeight it is positioned, and actualHeight its offsetHeight it is positioned (top/left set). But in which case would the offsetHeight change? I don't see, as whatever I am trying to imagine, I am always getting an delta of 0.

@ghusse

This comment has been minimized.

Show comment
Hide comment
@ghusse

ghusse Aug 13, 2013

Contributor

In this example:

bootstrap

The browser readjusts tooltip's size because of its relative position in its parent. The actual size you're getting in this case is different from the one computed before placing the element.

Contributor

ghusse commented Aug 13, 2013

In this example:

bootstrap

The browser readjusts tooltip's size because of its relative position in its parent. The actual size you're getting in this case is different from the one computed before placing the element.

@avernet

This comment has been minimized.

Show comment
Hide comment
@avernet

avernet Aug 13, 2013

@ghusse Got it! With this, I managed to do what I wanted, which is it to have the popover always "extend towards the bottom" of the control when shown to the right, as in:

screen shot 2013-08-13 at 4 03 23 pm

Here is a jsFiddle showing this in action. For those of you finding this and using Bootstrap 2.3.2 (not 3.x), you also need to patch Bootstrap and implement arrow() form popovers, as done in Bootstrap 3.

avernet commented Aug 13, 2013

@ghusse Got it! With this, I managed to do what I wanted, which is it to have the popover always "extend towards the bottom" of the control when shown to the right, as in:

screen shot 2013-08-13 at 4 03 23 pm

Here is a jsFiddle showing this in action. For those of you finding this and using Bootstrap 2.3.2 (not 3.x), you also need to patch Bootstrap and implement arrow() form popovers, as done in Bootstrap 3.

@Michel-TGI

This comment has been minimized.

Show comment
Hide comment
@Michel-TGI

Michel-TGI Nov 8, 2013

First timer. I created a jsfiddle context to show a 'tooltip' behavior.

I need some directions about where and how to address this issue (if it is an issue).

I had problem figuring why the tooltip was exceeding out of viewport. It was caused by a 'white-space:nowrap' styled on a parent container.

I created a working example on jsFiddle : http://jsfiddle.net/P2nwk/3/

I suggest to modify .tooltip.in{
opacity:0.8;
filter:alpha(opacity=80);
white-space:normal; /* added to fix a viewport bleeding. */
}

I don't know what else to do with this suggestion, so if someone can just lead me with few hints.

Michel-TGI commented Nov 8, 2013

First timer. I created a jsfiddle context to show a 'tooltip' behavior.

I need some directions about where and how to address this issue (if it is an issue).

I had problem figuring why the tooltip was exceeding out of viewport. It was caused by a 'white-space:nowrap' styled on a parent container.

I created a working example on jsFiddle : http://jsfiddle.net/P2nwk/3/

I suggest to modify .tooltip.in{
opacity:0.8;
filter:alpha(opacity=80);
white-space:normal; /* added to fix a viewport bleeding. */
}

I don't know what else to do with this suggestion, so if someone can just lead me with few hints.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 8, 2013

Az első példa az én screenshot nem felel meg ebben az esetben. hivatkozott ez húzza kérelmet orbeon / orbeon űrlapok,,* hozzá, hogy rögzíti a nézetablak vérzés. * /

ghost commented Nov 8, 2013

Az első példa az én screenshot nem felel meg ebben az esetben. hivatkozott ez húzza kérelmet orbeon / orbeon űrlapok,,* hozzá, hogy rögzíti a nézetablak vérzés. * /

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Nov 8, 2013

Azt javaslom, hogy módosítsa. Tooltip.in { Azoknak találni ezt, és a Bootstrap 2.3.2 (nem 3.x), akkor is kell patch )

ghost commented Nov 8, 2013

Azt javaslom, hogy módosítsa. Tooltip.in { Azoknak találni ezt, és a Bootstrap 2.3.2 (nem 3.x), akkor is kell patch )

@Yohn

This comment has been minimized.

Show comment
Hide comment
@Yohn

Yohn Nov 10, 2013

Contributor

adding the container option to the tooltips seemed to fix the problem. heres an updated fiddle -> http://jsfiddle.net/P2nwk/4/

Contributor

Yohn commented Nov 10, 2013

adding the container option to the tooltips seemed to fix the problem. heres an updated fiddle -> http://jsfiddle.net/P2nwk/4/

ma-si pushed a commit to ma-si/x-editable that referenced this pull request Feb 19, 2014

Fix 'bootstrap popover falls off page if editable is too close to win…
…dow edge'

Fix 'bootstrap popover falls off page if editable is too close to window edge'.


Reference:
    twbs/bootstrap#6713
    twbs/bootstrap#7399
    https://gist.github.com/nonumber/5257443

tjoris pushed a commit to InventiveDesigners/orbeon-forms that referenced this pull request Jun 2, 2014

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