Vuetify: [Feature Request] Floating action buttons with optional text

[mcfarljw]

New Functionality

It will allow for more robust floating action buttons for actions that need more description than just a icon can provide.

Improvements

n/a

Bugs or Edge Cases it Helps Avoid

n/a

[KaelWD]

tooltips with :value="true"?

[mcfarljw]

Good idea, didn't think to try that! It looks like the tooltip doesn't line up though when doing this inside a speed dial. I might be doing something wrong though.

https://codepen.io/mcfarljw/pen/VQVQap

[eelcowen]

@mcfarljw The tooltips position when they are created and still moving. If you create a small delay before they show they will position fine.

[KaelWD]

That's because of the animation. You can get around it by using a fade transition instead, or doing some janky timeouts: https://codepen.io/anon/pen/aqQKwN?editors=1010

[mcfarljw]

Thanks! This is definitely a sufficient work around for the time being.

[smanji]

With the tooltips overlaying on the page, by default, they have a tinted background. But depending on what is behind the tooltip, this little overlay can clutter the page and be a bit hard to read.

I'd like to suggest that when the speed dial opens, the entire page gets this tinted overlay, kind of like a modal, (instead of just the size of each individual tooltip) so that way the text of the tooltip for each button really pops and is easy to read.

Is there a way to accomplish this?

[alexeigs]

@KaelWD How is this supposed to work if you have an absolutely positioned floating button? The tooltips are not shown anymore once you add fixed or absolute to v-speed-dial.

[dominik-korsa]

What's the progress on this feature?
I wasn't able to find the specs for this, but there's an example of labels in a speed dial component.

https://material.io/components/buttons-floating-action-button#types-of-transitions

[joaofbvieira]

I've made a custom text label.

Here's my example: https://codepen.io/joaofbvieira/pen/dyGoELN

I hope that they implement this option into Vuetify. Until then, we make workarounds, lol.

Cheers.

[abepetrillo]

@joaofbvieira Seems like your missing a few things in that codepen? FWIW your work around does work, so I appreciate you sharing it!