trigger on Hover event on Vue 3

[mtzrmzia]

how can I trigger transition on Vue 3 instead of click?

[ycs77]

Can listen v-on:mouseenter and v-on:mouseleave events.

For example:

<template>
  <div>
    <Float
      :show="show"
      placement="bottom-start"
    >
      <button
        type="button"
        class="flex justify-center items-center px-5 py-2 bg-indigo-50 hover:bg-indigo-100 text-indigo-500 text-sm rounded-md"
        @mouseenter="open"
        @mouseleave="close"
      >
        Options
      </button>
      <ul
        class="w-48 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden focus:outline-none"
        @mouseenter="open"
        @mouseleave="close"
      >
        <li>
          <button
            type="button"
            class="block w-full px-4 py-2 hover:bg-indigo-500 hover:text-white text-left text-sm"
            @click="close"
          >
            Profile
          </button>
        </li>
        <li>
          <button
            type="button"
            class="block w-full px-4 py-2 hover:bg-indigo-500 hover:text-white text-left text-sm"
            @click="close"
          >
            Account settings
          </button>
        </li>
      </ul>
    </Float>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Float } from 'headlessui-float-vue'

const show = ref(false)

const open = () => show.value = true
const close = () => show.value = false
</script>

[mtzrmzia]

nice, thanks. Now it works, but I can't add the arrow, I tried but it shows in a weird way