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?