vuejs create tooltip showing all tooltips

Question

hi guys im just learning vuejs and its event in list. im wondering how can i show/hide components (in this example, a div) as tooltip?

i did this

<ul id="example-1">
  <li v-for="item in items">
    <div v-on:mouseover="tooltipActive = !tooltipActive">hover me</div>
    <div class="tooltip" v-if="tooltipActive">{{ item.name }}</div>
  </li>
</ul>

and i set tooltipActive: false in data. the problem is when i hover 1 list item, all tooltips in all items are showing.. (of course)

do you have any idea on how to solve this kind of sample?

Answer 1

console.clear()

new Vue({
  el: "#example-1",
  data:{
    items: [
      {name: "item one"},
      {name: "item two"},
      {name: "item three"}
    ],
    activeItem: null
  }
})

li {cursor: pointer}

<script src="https://unpkg.com/[email protected]"></script>
<ul id="example-1">
  <li v-for="item in items">
    <div v-on:mouseover="activeItem = item" 
          v-on:mouseout="activeItem = null">
        hover me
    </div>
    <div class="tooltip" v-if="activeItem === item">{{ item.name }}</div>
  </li>
</ul>