How to get the bottom position of an element on hover?

Question

Vue.js

<svg @mouseleave="onHideTooltip" class="availability-time-line-graphic" height="34"
                 preserveAspectRatio="none"
                 viewBox="0 0 448 34">
                  <rect
                    :fill="item.color"
                    :x="index*5" @mouseenter="onGetData(component_index, index)"
                    class="uptime-day component-11 day-0" data-html="true" height="34"
                    v-for="(item, index) in component.days" width="3"
                    y="0" />
 </svg>

methods: {
      onGetData(component, index, position) {
        let arr = this.components[component].days[index];
        this.tooltip = true;
        this.activeDay = arr.date;
        this.currentRect = "";
      },

      onHideTooltip() {
        this.tooltip = false;
      },
}

Answer 1

@mouseenter="onGetData(component_index, index, $event)"

methods: {
  onGetData(component_index, index, e) {
    const { bottom } = e.target.getBoundingClientRect();