Simple Vue `v-tippy` directive

tippy.ts

import "tippy.js/dist/tippy.css";
import "tippy.js/animations/scale.css";

import tippy, {
  type DefaultProps as DefaultTippyProps,
  type Props as TippyProps,
} from "tippy.js";
import type { Directive } from "vue";

const defaultProps: Partial<DefaultTippyProps> = {
  animation: "scale",
  arrow: false,
  ignoreAttributes: true,
  interactive: false,
  placement: "bottom",
  duration: [100, 100],
};

tippy.setDefaultProps({ ...defaultProps });

export default {
  created(el, binding) {
    const props: Partial<TippyProps> = binding.value;

    tippy(el, { ...props });
  },
} as Directive<Element, Partial<TippyProps>>;