Skip to content
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
Merged

Positioning tooltip on edge case #6713

merged 7 commits into from Feb 6, 2013

Conversation

@ghusse
Copy link
Contributor

@ghusse 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

, actualHeight
, delta
, replace = false;

This comment has been minimized.

@Yohn

Yohn Jan 27, 2013
Contributor

we have to follow the coding standards in bootstrap which includes no semi-colons - Contributing guidelines

@fat fat merged commit ee71fb4 into twbs:2.3.0-wip Feb 6, 2013
1 check passed
1 check passed
@caniszczyk
default The Travis build passed
Details
@fat
Copy link
Member

@fat 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
Copy link

@raulferras raulferras commented Feb 8, 2013

Whoa, nice fix!

@globetrotterdesigns
Copy link

@globetrotterdesigns 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
Copy link
Collaborator

@cvrebert cvrebert commented Feb 12, 2013

@storefrontsocial: that's #6832

@avernet
Copy link

@avernet 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
Copy link
Contributor Author

@ghusse 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
Copy link
Collaborator

@cvrebert cvrebert commented Aug 13, 2013

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

@ghusse
Copy link
Contributor Author

@ghusse 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
Copy link

@avernet 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
Copy link
Contributor Author

@ghusse 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
Copy link

@avernet 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
Copy link
Contributor Author

@ghusse 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
Copy link

@avernet 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
Copy link

@Michel-TGI 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
Copy link

@ghost 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
Copy link

@ghost 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
Copy link
Contributor

@Yohn 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
…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
Labels
Projects
None yet
Linked issues

Successfully merging this pull request may close these issues.

None yet

8 participants