Tooltip inside table gets wrong position

[ataube]

Hey there,

I tried to place a tooltip inside a table and it seems like that the position of the element gets wrong calculated. Have a look at this jsfiddle to see an example:
http://jsfiddle.net/twx36/10/

Do you have any idea how to fix this?

[joshdmiller]

@ataube - Hmmm...indeed. It seems to be using the table's offset height, but anchor's offset width. I'll take a look at this later today. Thanks!

[stiebitzhofer]

Hi,

I ran into the same problem. Fixed it by adapting the getPosition function this way:

   function getPosition() {
        y = element.prop('offsetTop');
        x = element.prop('offsetLeft');
        z = element.prop('parentNode')
        while (z) {
            y = y + z.offsetTop;
            x = x + z.offsetLeft;
            z = z.offsetParent;
        }
        return {
          width: element.prop( 'offsetWidth' ),
          height: element.prop( 'offsetHeight' ),
          top: y,
          left: x
        };
      }

Not testet for when not using a table.

[pkozlowski-opensource]

Actually I think that it would be easier to solve it by using getBoundingClientRect()

[stiebitzhofer]

Pawel, indeed this would be the perfect solution. But I am failing to apply it correctly. any hint how this might work? My knowledge of this world is quite limited...

[pkozlowski-opensource]

@stiebitzhofer just pushed a draft fix to https://github.com/angular-ui/bootstrap/tree/fix115 (a729a79), seems to be working OK.

@angular-ui/bootstrap any idea how to test this???

[stiebitzhofer]

Pawel,

thanks - solution is simply but I am still a pretty rookie with DOM, JavaScript and angular!

Best,
Hannes

---

Hannes Stiebitzhofer
+43 699 18664603

Am Dienstag, 12. Februar 2013 um 22:16 schrieb Pawel Kozlowski:

@stiebitzhofer (https://github.com/stiebitzhofer) just pushed a draft fix to https://github.com/angular-ui/bootstrap/tree/fix115 (a729a79 (a729a79)), seems to be working OK.
@angular-ui/bootstrap any idea how to test this???

—
Reply to this email directly or view it on GitHub (#115 (comment)).

[pkozlowski-opensource]

OK, here is the final fix:http://jsfiddle.net/HGS2J/
Pushing it to the repo in few minutes

[facultymatt]

This fix breaks tooltips in Modals/ dialogs. Should be re-opened.
See a2bbf4d#L1L53

[joshdmiller]

@facultymatt Can you provide a Plunker?

[pkozlowski-opensource]

@joshdmiller this is the same problem as #233

Basically this commit breaks all the tooltips within elements that define new coordinate system for they children (so basically tooltips within all elements positioned as absolute or relative). In this sense it is not linked to modal or dialog specifically.

@facultymatt It is not enough to simply revert this commit we need to find a fix for both #233 and this issue.

[facultymatt]

@joshdmiller Seems that using the old method of calculations top: element.prop( 'offsetTop' ), left: element.prop( 'offsetLeft' ) fixes placement SO LONG AS the parent element is has a css position, ie: position:relative. Problem is that bootstrap doesn't seem to add this prop to table, td, tr, etc. Thus table placement fails.

See: http://plnkr.co/edit/rzJlxV?p=preview

Seems there was a lot of chatter about this issue on the bootstrap github page, twbs/bootstrap#5687, and they claim to have fixed it in the recent version. Worth looking into how they are solving the placement problem?

[joshdmiller]

@facultymatt Thanks for that other bug report! That cleared it right up for me.

@pkozlowski-opensource Twitter solved it with the container option, so we will too.

This is the same as #233, which it turns out is a unknowing duplicate of #139, so we'll leave this one closed.

[facultymatt]

@joshdmiller you're welcome!

Looking into this, I'm not sure there's a consistant way to solve for all elements. Bootstrap uses jQuery's .offset() method in getPosition(), which I believe returns the same values as the getBoundingClientRect (not positive though).

The only solution that seems to work for any placed element ( see updated plunker here: http://plnkr.co/edit/D9NUY2?p=preview ) is to append the tooltip to the body. HOWEVER, this causes z-index issues, for example a tooltip placed inside a modal would be hidden behind the modal due to bootstraps z-index variables settings. (They used to append to the body and changed the default behavior to insert after for this reason.)

Now they provide the option to set a container
https://github.com/twitter/bootstrap/blob/master/js/bootstrap-tooltip.js#L141

Perhaps this is the approach we should take?

[joshdmiller]

@facultymatt Yes, #139 is to add the container option, which will solve this (or at least provide a workaround).

[pkozlowski-opensource]

I think I did more harm than good by my "fix" to this issue. It fixes the bug report here (positioning in a table) but breaks positioning within all the elements that define a coordinate system (relative, fixed, absolute). So I think that we should revert it and have a "position" service that could return coordinates usable in style (top, left) properties.

The trouble with tables is that those are returned as a offsetParent but they are still statically positioned so don't define a new coordinate system for their child elements. jQuery solves this by traversing offsetParent elements up in the hierarchy till they encounter a non-statically positioned element:
https://github.com/jquery/jquery/blob/master/src/offset.js#L106

Reopening so we can have visibility over all the positioning issues. On top of this I've realized that I will need to position typeahead's drop-down as the current markup is not good (see #262 #282)

[pkozlowski-opensource]

Fixed for good in 6458f48!