Playground #

<template>
  <span>Trigger by:</span>
  <input id="hover" v-model="trigger" type="radio" value="hover" />
  <label for="hover">Hover</label>
  <input id="focus" v-model="trigger" type="radio" value="focus" />
  <label for="focus">Focus</label>
  <input
    id="click-to-open"
    v-model="trigger"
    type="radio"
    value="click-to-open"
  />
  <label for="click-to-open">Click to open</label>
  <input
    id="click-to-toggle"
    v-model="trigger"
    type="radio"
    value="click-to-toggle"
  />
  <label for="click-to-toggle">Click to toggle</label>
  <input id="manual" v-model="trigger" type="radio" value="manual" />
  <label for="manual">Manual</label>
  <template v-if="trigger === 'manual'">
    <br />
    <label for="visible">Show tooltip:</label>
    <input id="visible" v-model="visible" type="checkbox" />
  </template>
  <br />

  <label for="forceShow">Force show tooltip:</label>
  <input id="forceShow" v-model="forceShow" type="checkbox" />
  <br />

  <label for="useDelayOnMouseover">Use delay on mouseover:</label>
  <input
    id="useDelayOnMouseover"
    v-model="useDelayOnMouseover"
    type="checkbox"
  />
  <br />

  <label for="useDelayOnMouseout">Use delay on mouseout:</label>
  <input id="useDelayOnMouseout" v-model="useDelayOnMouseout" type="checkbox" />
  <br />

  <div id="root">
    <div
      :tabindex="trigger === 'focus' ? 0 : undefined"
      ref="popcorn"
      id="popcorn"
      aria-describedby="tooltip"
    ></div>
    <div ref="tooltip" id="tooltip" role="tooltip">
      My tooltip
      <div id="arrow" data-popper-arrow></div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed } from "vue";
import { usePopperjs, Trigger } from "../.."; // import { usePopperjs, Trigger } from "vue-use-popperjs"
import "../assets/popcorn.css";

export default defineComponent({
  setup() {
    const popcorn = ref();
    const tooltip = ref();
    const trigger = ref<Trigger>("hover");
    const forceShow = ref(false);
    const useDelayOnMouseover = ref(true);
    const delayOnMouseover = computed(() =>
      useDelayOnMouseover.value ? 300 : 0
    );
    const useDelayOnMouseout = ref(true);
    const delayOnMouseout = computed(() =>
      useDelayOnMouseout.value ? 300 : 0
    );
    const { visible } = usePopperjs(popcorn, tooltip, {
      trigger,
      forceShow,
      delayOnMouseover,
      delayOnMouseout,
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [0, 8],
          },
        },
      ],
    });

    return {
      popcorn,
      tooltip,
      trigger,
      visible,
      forceShow,
      useDelayOnMouseout,
      useDelayOnMouseover,
    };
  },
});
</script>

<template>
  <label for="disabled">Disabled:</label>
  <input id="disabled" v-model="disabled" type="checkbox" />
  <br />

  <label for="teleportToBody">Teleport to body:</label>
  <input id="teleportToBody" v-model="teleportToBody" type="checkbox" />
  <br />

  <label for="useTransition">Enable fade transition:</label>
  <input id="useTransition" v-model="useTransition" type="checkbox" />
  <br />

  <div id="root">
    <Popper
      :disabled="disabled"
      :reference-props="{ id: 'popcorn' }"
      :popper-props="{ id: 'tooltip' }"
      :teleport-props="teleportToBody ? { to: 'body' } : undefined"
      :transition-props="useTransition ? { name: 'fade' } : undefined"
      :modifiers="modifiers"
    >
      My tooltip
      <div id="arrow" data-popper-arrow></div>
    </Popper>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { Popper } from "../.."; // import { Popper } from "vue-use-popperjs"
import "../assets/popcorn.css";

export default defineComponent({
  components: {
    Popper,
  },

  setup() {
    const disabled = ref(false);
    const teleportToBody = ref(true);
    const useTransition = ref(true);
    const modifiers = [
      {
        name: "offset",
        options: {
          offset: [0, 8],
        },
      },
    ];

    return {
      disabled,
      teleportToBody,
      useTransition,
      modifiers,
    };
  },
});
</script>