View Full Version : How do you pin a tooltip to the top right corner of a grid cell?

Patrick Bennett
16 Apr 2014, 10:19 AM

I have a tooltip I want to have appear to the right side of the cell when you roll over it and then stay there if you move the cursor into it so you can add comments. I can get it to be in the right place as long as the user has not scrolled using this code:

getTargetXY: function() {
var e = this.triggerElement,
normalViewXY = this.grid.normalGrid.view.getXY();

return [normalViewXY[0] + e.offsetLeft + e.clientWidth, normalViewXY[1] + e.offsetTop];

The problem is that I didn't realize that e.offsetTop was from the top of the virtual grid, not the actual location of the cell from the top of the active view. So when I scroll down but then roll over a cell with a comment, the tooltip appears at the bottom of the grid instead of right next to the corresponding cell.

What is the correct calculation to get the exact position of the cell?

BTW: The reason I am doing this is that "anchor: right" doesn't seem to work when you have a locked grid. It happily displays the tooltip to the right of the cell which is <#_of_locked_coumns> to the left of the cell I really want it on. So maybe I should be asking "How can I get anchor values to respect locked columns?"


Gary Schlosberg
30 Apr 2014, 11:39 AM
Sounds like a bug for locked grids. In which version of ExtJS are you seeing this?

Patrick Bennett
30 Apr 2014, 12:35 PM
I was thinking about this completely wrong. When I set "anchor" to "right" I thought that meant "anchor yourself to your trigger element on IT'S right side". What it really means is "anchor your self to your trigger element on YOUR right side", so I just had to change it to "left" and now it shows up where I want.

Now I just need to figure out how to make it show up in the right place when I double click on a cell that doesn't yet have the trigger class that causes it to come up.