[Feature Request] v-tooltip with arrow to emphasize direction

[timothymarois]

Problem to solve

This feature would improve user experience (UX) and help with giving the right direction to the tip being show. Currently, there is no direction, and after thousands of user tests we've run across our platforms, we've noticed that user's believe the tooltips are the buttons instead of telling the user what the button actually does. This is because the tooltip themselves look as if they are independent from their original object.

Proposed solution

Like many tooltips across many online packages, they usually always have an arrow pointing towards its object. Most notably, the Bootstrap tooltip.

Example with tooltip and arrow

Compared to what it currently does:

This is just one example of many, for the user's its hard for them to understand the tooltip is a helpful guide rather than the button they should click. Especially if you activate tooltips without hover, its even more confusing towards users, 78% of the sample of users tested clicked the tooltip message instead of the buttons themselves.

[kylawamg]

+1

[alexdarh]

+1

[mchl18]

1+ At least let us attach some class to the actual tooltip

[jacekkarczmarczyk]

@mchl18

At least let us attach some class to the actual tooltip

use content-class prop

[justinehell]

+1

[abepetrillo]

Any update on this? Hit the same requirement

[Hextar]

Using content-class I've been able to add a class 'right-arrow' to position a pseudo-element accordingly. More classes could be used depending on which is the tooltip positioning and the desired arrow direction (top-left, top-center, top-right, etc)

        // SCSS
	$arrow-height: 16;
	$arrow-width: 16;

	.v-tooltip__content.menuable__content__active {
		&.right-arrow {
			overflow: inherit !important; // that's important to make the pseudo-element visible outside the main container
			z-index: 20;

			&::before {
				content: '';
				position: absolute;
				width: #{$arrow-width}px !important;
				height: #{$arrow-height}px !important;
				top: calc(50% - #{$arrow-height / 2}px);
				bottom: 0;
				right: -#{$arrow-width}px;
				z-index: 21;
				// custom appearance rules
			}
		}
	}

[SyzbaLinux]

This how I solved it. Please feel free to suggest edits and to improve the code

https://github.com/SyzbaLinux/Vuetify-Tooltip

[4KDA]

+1

[4KDA]

1+ At least let us attach some class to the actual tooltip

We can only accurately position the arrow, for example, in the middle of the tooltip, but we will have a problem when the tooltip shows the edge of the page and therefore moves, relative to the call element

[Thomas-1985]

+1

[presiyan-peev]

+1

[krmroland]

+1

[omnichronous]

For anyone still looking, until this feature is realized - Floating Vue is what worked perfectly for me for this case.

[linpan]

@omnichronous seem to conflicts with vuetify v-dialog compoent.

[johnleider]

Marking this as a duplicate of #4843