Manual option, but no details on how to trigger?

[Akryum]

The target element will have a _tooltip property referencing the Popper tooltip object, so with refs you could do something like this:

this.$refs.myButton._tooltip.show()

[jacobmischka]

In case anyone comes across this like I did, the current methods on the _tooltip object are show() and hide().

[bengirl]

Can you give me an example? v-tooltip.top-center="{ content: errors.first('email'),trigger:'manual' }"

[jacobmischka]

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>

[bengirl]

When you lose focus, open tooltip？ `

` @Uncaught TypeError: Cannot read property 'show' of undefined

[jacobmischka]

I think you should remove the second $refs from your calls, so this instead: this.$refs.myButton._tooltip.show()

[stefli]

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.

[Akryum]

I think we can close this now.

[mokkabonna]

Shouldn't options support open when using directive? Just like for component. Using the _tooltip.show() function seems a bit dirty to me.

[dimensi]

@Akryum really, add plz open options for tooltip. It's look dirty using $refs for manipulate tooltips.

[RavenXce]

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.

[kgrosvenor]

Any news on this, i'm hitting the same barrier?

[dimensi]

@Akryum reopen this, plz.

[emmanuel-franc]

indeed, it would be great