title: VueJS: Get left, top position of element?
body: <p>While converting legacy jquery code, I stuck at getting position of element.</p>
  <p>My goal is display floating <code>div</code> above <code>a</code> tag.</p>
  <p>Here is my template.</p>
  <pre><code>&lt;a href=&quot;#none&quot; v-for=&quot;busstop in busstops&quot;
     :id=&quot;busstop.id&quot;
     @mouseenter=&quot;onMouseEnterBusStop&quot;
     @mouseleave=&quot;onMouseLeaveBusStop&quot;
     onclick=&quot;detailsOpen(this);&quot;&gt;
  &lt;div :class=&quot;['marker-info', markInfoBusStop.markerInfoActiveClass]&quot;
       :style=&quot;markInfoBusStop.markerInfoStyle&quot;&gt;
      &lt;p&gt;&lt;strong&gt;{{markInfoBusStop.busStopNo}}&lt;/strong&gt;{{markInfoBusStop.busStopName}}&lt;/p&gt;
      &lt;dl&gt;
        ...
      &lt;/dl&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Vue code is below.</p>
  <pre><code>data: {
    markInfoBusStop: { 
        busStopNo: '12345',
        markerInfoActiveClass: '',
        markerInfoStyle: {
          left: '200px',
          top: '200px'
        }
    },
    ...
  },
  methods: {
    onMouseEnterBusStop: function(ev) {
      let left = ev.clientX;
      let top = ev.clientY;
      this.markInfoBusStop.markerInfoActiveClass = 'active';
      this.markInfoBusStop.markerInfoStyle.left = left + 'px';
      this.markInfoBusStop.markerInfoStyle.top = top + 'px';
  }
  </code></pre>
  <p>I'm just using current mouse pointer's position, but need element's absolute position.</p>
  <p>My legacy jquery is using <code>$(this).position()</code> as below.</p>
  <pre><code>$(document).on(&quot;mouseenter&quot;, &quot;a.marker&quot;, function() {
      var left = $(this).position().left;
      var top = $(this).position().top;
      $(&quot;.marker-info&quot;).stop().addClass(&quot;active&quot;).css({&quot;left&quot;:left, &quot;top&quot;: top});
  });
  </code></pre>