sqliteviz/src/tooltipMixin.js

export default {
  data () {
    return {
      tooltipStyle: {
        visibility: 'hidden'
      }
    }
  },
  computed: {
    tooltipElement () {
      return this.$refs.tooltip
    }
  },
  methods: {
    showTooltip (e, tooltipPosition) {
      const position = tooltipPosition ? tooltipPosition.split('-') : ['top', 'right']
      const offset = 12

      if (position[0] === 'top') {
        this.tooltipStyle.top = e.clientY - offset + 'px'
      } else {
        this.tooltipStyle.top = e.clientY + offset + 'px'
      }

      if (position[1] === 'right') {
        this.tooltipStyle.left = e.clientX + offset + 'px'
      } else {
        this.tooltipStyle.left = e.clientX - offset - this.tooltipElement.offsetWidth + 'px'
      }

      this.tooltipStyle.visibility = 'visible'
    },
    hideTooltip () {
      this.tooltipStyle.visibility = 'hidden'
    }
  }
}