Closed jaybeecave closed 7 years ago
In case anyone comes across this like I did, the current methods on the _tooltip
object are show()
and hide()
.
Can you give me an example? v-tooltip.top-center="{ content: errors.first('email'),trigger:'manual' }"
Here's one of my full components, the important bits are tooltipOptions
and the loading
watcher.
<template>
<span ref="loadingContainer" v-tooltip="tooltipOptions">
<button v-if="loading" class="btn" :class="loadingClass" title="Loading" disabled>
<svg-icon src="/img/ring.svg" />
</button>
<slot v-else></slot>
</span>
</template>
<script>
import { VTooltip } from 'v-tooltip';
import SvgIcon from './SvgIcon.vue';
export default {
directives: {
tooltip: VTooltip
},
props: {
loading: {
type: Boolean,
default: false
},
loadingClass: {
type: [String, Object],
required: false
},
successful: {
type: Boolean,
default: false
},
tooltip: {
type: String,
default: 'Done!'
},
tooltipTimeout: {
type: Number,
default: 3000
}
},
computed: {
tooltipOptions() {
return {
content: this.tooltip,
trigger: 'manual'
};
}
},
watch: {
loading(loading, oldLoading) {
if (!loading && oldLoading && this.successful) {
this.$refs.loadingContainer._tooltip.show();
window.setTimeout(() => {
this.$refs.loadingContainer._tooltip.hide();
}, this.tooltipTimeout);
}
}
},
components: {
SvgIcon
}
};
</script>
When you lose focus, open tooltip? `
` @Uncaught TypeError: Cannot read property 'show' of undefined
I think you should remove the second $refs
from your calls, so this instead: this.$refs.myButton._tooltip.show()
Check the dom tree to find the element who has _tooltip attribute, then use the dom path to invoke the show() or hide() function. Something likes what jacobmischka mentioned.
I think we can close this now.
Shouldn't options support open
when using directive? Just like for component. Using the _tooltip.show() function seems a bit dirty to me.
@Akryum really, add plz open options for tooltip. It's look dirty using $refs for manipulate tooltips.
Having to do this is sad:
watch: {
leftTipVisible(visible) {
visible ? this.$refs.leftTip._tooltip.show() : this.$refs.leftTip._tooltip.hide();
},
rightTipVisible(visible) {
visible ? this.$refs.rightTip._tooltip.show() : this.$refs.rightTip._tooltip.hide();
},
startTipVisible(visible) {
visible ? this.$refs.startTip._tooltip.show() : this.$refs.startTip._tooltip.hide();
},
endTipVisible(visible) {
visible ? this.$refs.endTip._tooltip.show() : this.$refs.endTip._tooltip.hide();
},
paymentTipVisible(visible) {
visible ? this.$refs.paymentTip._tooltip.show() : this.$refs.paymentTip._tooltip.hide();
},
cutTipVisible(visible) {
visible ? this.$refs.cutTip._tooltip.show() : this.$refs.cutTip._tooltip.hide();
}
}
Will you be adding the prop or are accepting a PR for this? It doesn't seem hard to do.
Any news on this, i'm hitting the same barrier?
@Akryum reopen this, plz.
indeed, it would be great
The target element will have a
_tooltip
property referencing the Popper tooltip object, so with refs you could do something like this: