0

I want to place a tooltip next to a table row in Angular 1.5, similar to something like this: Getting HTML table row position and showing div next to it (but this is jQuery)

I'm trying to pass the table row element to a controller function, but seem unable to access the element.

I've tried:

Template snippet:

<tbody>
    <tr ng-repeat="s in sessions"
            ng-mouseover="showPopup(this)"
            ...

Javascript snippet:

        $scope.showPopup = function($event) {
            console.log(angular.element(this)); // [p]
            console.log(angular.element(this).prop('offsetLeft')); // undefined
            console.log($event.target); // undefined
        console.log(angular.element($event.target).prop('offsetLeft')); // undefined

How can I get the actual coordinates of the table row?

Where [p], from console.log(angular.element(this)); above, looks like:

enter image description here

user3871
  • 12,432
  • 33
  • 128
  • 268

2 Answers2

2

For this I would recomment ui-bootstrap it handles tooltips very easily:

https://angular-ui.github.io/bootstrap/

But if you don't want to use it you can use something like this on table element.

in HTML:

<table ng-mouseover="getInfo($event)">

and in JS use:

     $scope.getInfo= function(event) {
      $scope.currentPosition = `${event.srcElement.offsetTop}/${event.srcElement.offsetLeft}`;
      console.log(event);
     }

Then you will have access to event in your function. event will contain srcElement which is element you've hovered. In example I'm getting offsetTop and offsetLeft but you might use something else.

here's example:

https://jsfiddle.net/ng1mn8qp/5/

pegla
  • 1,866
  • 4
  • 17
  • 20
  • @Hi, I want the position of the `table row (tr)`, not `table data (td)`. Doing `angular.element($event.target);` or what you recommended `$event.srcElement` gets me the hovered `td` coordinates. So, I tried `angular.element($event.currentTarget);`, which gets me the parent `tr` element, but for some reason the coordinates are wrong, i.e., if the `td` in the parent `tr` is at `left: 82` and `top: 906`, the `tr` is at `0` and `36`? Why is this? – user3871 Nov 20 '17 at 00:45
  • Well isn't top position of the td same as top position of tr? So if offsetTop gives you top offset for td it should be the same as tr, so I don't understand your concern here. You have everything you need in console check that event that I log in my example - if you're still concerned you can use event.srcElement.parentElement.offsetTop and event.srcElement.parentElement.offsetLeft . – pegla Nov 20 '17 at 01:15
  • I don't have the `left` position of the `tr` though, right? Unless I a) rely on them hovering over the first `td` and using that, or b) getting the first `td` from the array of `td`s in `tr`. I was more so trying to rely on getting the coordinates of the element of concern, not piecing together things. – user3871 Nov 20 '17 at 01:18
  • @Also, If I check the `tr` element in console (`angular.element(event.currentTarget);`), It shows the `tr` at `(0, 36)` which I find odd as it's completely off from its children `td` coordinates (Same results as `event.srcElement.parentElement.offsetTop` and `event.srcElement.parentElement.offsetLeft`) – user3871 Nov 20 '17 at 01:21
  • You're not checking things I'm writing, you are stuck with event.currentTarget which will get you table element since you have ng-mousemove on that element. You need event.srcElement (read about event propagation - https://www.sitepoint.com/event-bubbling-javascript/) Just check my previous comment and if you can't work it out I will make you example on fiddle tomorrow. You might be interested in this as well which will get you position and width/height of tr element: event.srcElement.parentElement.getBoundingClientRect() – pegla Nov 20 '17 at 01:40
0

You can add a track by attribute to your ng-repeat. Something like ng-repeat="s in sessions track by $index", the $index variable is the current index, so you can use it to search through your table rows and get the correct one.

Nicolas
  • 8,077
  • 4
  • 21
  • 51
  • I'm already tracking by index. How do I "search through table rows"? Doesn't passing `this` through on `ng-mouseover` solve that? Or at least should? – user3871 Nov 19 '17 at 23:55
  • it should indeed, try adding your code that shows the popup in a `$timeout(function(){});` it usualy solve many problems. – Nicolas Nov 19 '17 at 23:58