Positioning tooltip on edge case

[ghusse]

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:

After:

[Yohn]

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

[fat]

thanks for the help man - very appreciated

[pherrymason]

Whoa, nice fix!

[globetrotterdesigns]

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]

@storefrontsocial: that's #6832

[avernet]

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:

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):

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 feature was implemented on tooltips, not on popovers. That's why you
cannot observe it on your example.

[cvrebert]

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

[ghusse]

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.

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

[avernet]

@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):

[ghusse]

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]

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

In this example:

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]

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

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]

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]

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]

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]

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