Impossible to use a custom theme for a tooltip

[AntonioPerezCarro]

Hello. I don't know if this a bug ?

I want to use a custom theme inside a vuetify button (tooltips for vuertify does not work as well as flating-vue) I'm using vue3 and I use the directive approach, that works fine using default theme. But fails with custom theme

 v-tooltip = "{ content: 'Tooltip content here',      
     theme:'myTip', 
     }" > 

This is the simple theme:

let tipThemes = {
  myTip: {
    $extend:'tooltip',
    $resetCss: true,
    triggers:['click'],
    autoHide: true,
    placement: 'bottom',
    distance: 2,
    skidding: 0,
    html: true,
    arrowPadding: 18,
  },
}

I have also the css styes, but... I have an error on initialization code

init() {
      if (!this.$_isDisposed) return;
      this.$_isDisposed = false;
      this.isMounted = false;
      this.$_events = [];
      this.$_preventShow = false;
      this.$_referenceNode = this.referenceNode();
      this.$_targetNodes = this.targetNodes().filter(e => e.nodeType === e.ELEMENT_NODE);
      this.$_popperNode = this.popperNode();
      this.$_innerNode = this.$_popperNode.querySelector(".v-popper__inner");
      this.$_arrowNode = this.$_popperNode.querySelector(".v-popper__arrow-container");
      this.$_swapTargetAttrs("title", "data-original-title");
      this.$_detachPopperNode();

      if (this.triggers.length) {
        this.$_addEventListeners();
      }

      if (this.shown) {
        this.show();
      }
    },

I have an error because triggers are undefined..... console.log(this.theme) show 'myTip' but 'this' is almost empty... ( I dont see any other properties...)

Cannot read properties of undefined (reading 'length') at Proxy.init (floating-vue.es.js:634:25) at Proxy.mounted (floating-vue.es.js:537:10) at callWithErrorHandling (runtime-core.esm-bundler.js:357:18) at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:367:17) at hook.weh.hook.weh (runtime-core.esm-bundler.js:3388:19) at flushPostFlushCbs (runtime-core.esm-bundler.js:591:41) at flushJobs (runtime-core.esm-bundler.js:643:5)

I' using the vue.use(floatingVue, tipThemes) and also the floatingVue.options.themes Nothing works.... Even if I use the full style https://floating-vue.starpad.dev/guide/config.html#default-values , changing something... Nothing works....

Any idea ? Link ? Thanks

[Abdulla1995]

For anyone else faced this issue my config looks like that and fixed: Found answer here: https://github.com/Akryum/floating-vue/issues/853

import FloatingVue, { options } from 'floating-vue'
import 'floating-vue/dist/style.css'

export default defineNuxtPlugin(nuxtApp => {
  Object.assign(options, {
    themes: {
      ...options.themes,
      menudark: {
        $extend: 'menu',
        // Other options (see the 'Global options' section)
        placement: 'bottom',
        $resetCss: true,
        delay: 100
      },
      modaldropdown: {
        $extend: 'dropdown',
        // Other options (see the 'Global options' section)
        placement: 'bottom-start',
        $resetCss: true,
        delay: 100
      }
    }
  });
  nuxtApp.vueApp.use(FloatingVue)
})

[curtgrimes]

Correct. I also get the error Cannot read properties of undefined (reading 'length') for the line if (this.triggers.length) { when I have not yet defined a theme with the given name:

// You must define the theme first, even if to just say that it extends another theme:
FloatingVue.options.themes['foobar-test'] = {
    $extend: 'dropdown',
};

// Otherwise, there will be an error when trying to mount this component:
const MyCustomPopoverComponent = {
    ...PopperWrapper,
    vPopperTheme: 'foobar-test',
};

I think the fix here is for FloatingVue to have a more helpful console message when someone tries to use a theme that has not yet been defined.

[demiro]

Having similar issue. Using as Dropdown component.... seemingly cannot set tippy's theme... I tried a lot of things (looks like docs are all over the place without clear examples)

<script setup lang="ts">
  import { Dropdown } from "floating-vue";
  const isMenuOpen = ref(false);
  const menuRef = ref<typeof Dropdown | null>(null);
    const tippySettings = {
    placement: "top",
    theme: "prompt-menu",
    trigger: "click",
  };
</script>

<template> 
...
`<Dropdown class="flex" :distance="6" ref="menuRef" v-model:shown="isMenuOpen" :options="tippySettings">
      <img ref="imgRef" :src />
      <template #popper>
        <SomeComponent />
      </template>
    </Dropdown>
</template>

tried v-bind="tippySettings" tried :theme="tippySettings.theme"

tried a lot of other things, nothing works