vuetifyjs / vuetifyjs/vuetify

[Feature Request] VTouchHold Directive for Long-Press of an Element

Open
#5,322 10 comments 19 reactions 1 assignee View on GitHub

@J-Sek is already working on this.

Since Aug 3, 2025.

D: New Directive T: feature
Dominant language
TypeScript
Stars
41k
Forks
7.1k
Avg merge
1d 21h
Merged PRs (30d)
11

Description

What problem does this feature solve?

Google's Tooltips MD spec mentions:

A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop).

Vuetify has the mouse hover method solved for tooltips on desktop, but does not yet provide a method to handle a finger long-press on mobile. Instead, a <v-tooltip> displays immediately on tap/click. This is sometimes the desired response, but other times it is not.

Adding a v-touch-hold type directive to vuetify would:

  1. Align vuetify more closely to Google's MD spec for tooltips.
  2. Potentially make it easy for developers to implement long-press functionality within a vuetify app anywhere it's needed. The current offerings elsewhere (other than here) do not seem a good match for vuetify use.
What is your proposed solution?

A v-touch-hold directive such as used by Quasar seems to have the best combination of features, simplicity, and effectiveness. It:

  1. is a directive, so can be applied most anywhere directly
  2. allows for custom long-press duration length v-touch-hold:2000, but has a reasonable default setting of 600ms
  3. can be used for both mouse and touch events, or limited to just touch events v-touch-hold.noMouse, as desired
  4. supports both .stop and .prevent modifier use, if needed
  5. calls a method when the duration threshold has been reached v-touch-hold="myHandler"
  6. passes the event to the handler, with the developer being able to glean the screen position and duration length (this feature may or may not be that useful)

Thanks for considering this request.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.