Vuetify: [Feature Request] Persistent tooltips

Created on 7 Feb 2019  路  6Comments  路  Source: vuetifyjs/vuetify

Problem to solve

This is useful for placing clickable elements (e.g. a link) inside tooltip. Currently we can only increase closeDelay but it would be better to add a prop that would make a tooltip persistent - it wont close when hovered

Proposed solution

Currently I use a custom wrapper for this, I think this can be included as part of core package

<template>
  <v-tooltip v-bind="$attrs" ref="tooltip">
    <slot name="activator" slot="activator"/>
    <div @mouseenter="persistTooltip" @mouseleave="closeTooltip">
      <slot/>
    </div>
  </v-tooltip>
</template>

<script>
  export default {
    name: 'PersistentTooltip',
    inheritAttrs: false,
    methods: {
      persistTooltip() {
        this.$refs.tooltip.runDelay('open')
      },
      closeTooltip() {
        this.$refs.tooltip.runDelay('close')
      },
    },
  }
</script>
VTooltip enhancement

Most helpful comment

This can be achieved by assigning both disabled and v-model to the same prop https://codepen.io/anon/pen/ZwvymM

All 6 comments

This can be achieved by assigning both disabled and v-model to the same prop https://codepen.io/anon/pen/ZwvymM

This is not exactly the same behavior as described in the issue. The tooltip should be persisted only when hovered. When mouse leaves tooltip content, it should hide after closeDelay, unless hovered again

Ah, my apologize, i thought you were requesting just a general persistence.

here is a pen with desired behavior https://codepen.io/transGLUKator/pen/MLrvjL

MD2 tooltips don't support interactive content at all, they aren't intended to be used for links.

Thank you for the Feature Request and interest in improving Vuetify. After careful consideration the team has decided that this is not functionality that we are looking to implement at this time.

If you have any additional questions, please reach out to us in our Discord community.

Was this page helpful?
0 / 5 - 0 ratings