Positioning tooltip on edge case #6713

Merged
merged 7 commits into from Feb 6, 2013

Projects

None yet

8 participants

@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

@Yohn Yohn commented on an outdated diff Jan 27, 2013
js/bootstrap-tooltip.js
this.$element.trigger('shown')
}
}
+ , applyPlacement: function(offset, placement){
+ var $tip
+ , width
+ , height
+ , actualWidth
+ , actualHeight
+ , delta
+ , replace = false;
+
@Yohn
Yohn Jan 27, 2013

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

Details default The Travis build passed
@fat
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

Whoa, nice fix!

@storefrontsocial

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

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

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

@avernet avernet referenced this pull request in orbeon/orbeon-forms Oct 28, 2013
Open

Unappealing arrow positioning for tooltip #1368

@Michel-TGI

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
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
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
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 ma-si pushed a commit to ma-si/x-editable that referenced this pull request Feb 19, 2014
@belerweb belerweb 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
63f8c0c
@tjoris tjoris pushed a commit to InventiveDesigners/orbeon-forms that referenced this pull request Jun 2, 2014
@avernet avernet Improve Bootstrap for left tooltips, for #1081
- Building on @ghusse work for twbs/bootstrap#6713
81fc29c
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment