Akryum / Akryum/floating-vue

Impossible to use a custom theme for a tooltip

Ouverte
#871 3 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
Langage dominant
TypeScript
Étoiles
3.5k
Forks
341
Merge moyen
14 min
PR mergées (30 j)
8

Description

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

Guide de contribution

Ouvrir le guide de contribution

Évaluation

Cette issue n'a pas encore été évaluée.

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.