v-on

In this task, you need to attach two distinct events, mouseenter, and mouseleave, to the div element.

Firstly, when your mouse enters the div, the showTooltip method must be called. This sets tooltipVisible to true, making the tooltip visible. When your mouse leaves the div, the hideTooltip method must be called, setting tooltipVisible to false and thus hiding the tooltip. Select the correct option below.

<template>
  <div 'missing code'>
    Move your mouse over me
    <span v-if="tooltipVisible">You are seeing a tooltip!</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tooltipVisible: false
    };
  },
  methods: {
    showTooltip() {
      this.tooltipVisible = true;
    },
    hideTooltip() {
      this.tooltipVisible = false;
    }
  }
}
</script>