Impossible to use a custom theme for a tooltip
- 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.