Material-components-web: Investigate making the Tooltip Component

[traviskaufman]

Spec reference: https://material.io/go/design-tooltips

Copied from https://github.com/google/material-design-lite/issues/4495

[MyDimeIsUp]

Any update on this? Wanting to use this for some of my drawer list items.

[menelike]

Maybe I've missed something, but currently :before and :after classes are used for ripple effects on buttons. Adding tooltips could be a hard task as they will conflict with that.

Imho ripple should be an opt-in and not included per default on components.

[btakita]

Looks like Tooltips are a ways down in the priority list.

https://www.pivotaltracker.com/story/show/128619029

[raupes]

Please add the tooltip and the other missing controls that are already available at MDL

[Garbee]

The flow isn't to match MDL as rapidly as possible. It's to build the foundation components first and build up from those to the extraneous. Tooltip's are something that need to get tested in various scenarios across multiple components to make sure they work in all the places developers will want them. Which is why it is one of the last planned items.

[j-o-d-o]

Is anybody working on this? If not, I'd give it a try to implement tooltips, I kind of need them.

[ronnieroyston]

My thought is that tooltips are exclusive to mouse cursors hovering. I can't imagine how a tooltip would work on a touch (mobile or tablet). Noone holds their finger a millimeter away from the touchscreen do they? Yet, Material Design specifies for those use cases (mobile/tablet)??? I think Microsoft is of the same mind:

Tooltips appear automatically, or pop up, when the user pauses the mouse pointer over a tool or some other UI element.

I think if MDC-Web tackled desktop (mouse attached) devices only it really could be coded in under a day w/ CSS positioning. A default for top with modifier class for bottom, left, and right.

Anyways, just sayin...

[Zodiase]

@rhroyston On touch enabled devices tooltips could still be initiated with say a press-and-hold to give more detail about the subject the user is touching.

[ronnieroyston]

@Zodiase You are correct. Good point. However, the press-and-hold gesture feature is awful no matter the manufacturer/device. There is a reason that the mouse/mousepad exists and persists. press-and-hold is plain awful in my experience. In fact, press-and-hold has probably resulted in thousands of driving related deaths.

I'm just saying, implement it for :hover events and if UI designers want to waste their time implementing press-and-hold functionality, let them have at it. The blood is on their hands.

[ronnieroyston]

Just an idea... I had failed to notice that tooltips are baked in to the browser. All you gotta do is add title="my tooltip text" to whatever element you want a tooltip on. So, while the look and feel might not be materialized, ...it's not as if you can't have them today.

https://codepen.io/rhroyston/pen/xzPPQm

MDN notes re the title property:

Accessibility concerns

Use of the title attribute is highly problematic for:

• People using touch-only devices
• People navigating with keyboards
• People navigating with the aid of assistive technology such as screen readers or magnifiers
• People experiencing fine motor control impairments
• People with cognitive concerns.

[AleFachini]

could we use a snackbar triggered by hover in MDC web? Should i script hover over an element to trigger a click? and so opening a snackbar? and use these as tooltips?

[khalyomede]

@AleFachini I don't think snackbars are the proper solution, yet it's a solution.

I think tooltips have their place in the list of components, and some vendors like Materialize have done it, which is a sign that it draws interest.

For my own purpose, tooltips would be beneficial when I have icon buttons on cards. Adding a tooltip would reassure my desktop users of the expected action when clicking the icon button.

I hope my mobile users to be web-educated enough to take the "risk" to click my icon buttons while trying to figure out the expected behavior.

What I generally do, is to have an intermediary form to confirm the action, for the icon buttons that have an impact on my users experience (like add to cart icons buttons). Otherwise, a save to my favorite icons button would not have an intermediary form, and is explicit enough with the icons for me to not add a tooltip.

[abhiomkar]

Tooltip component is now implemented https://github.com/material-components/material-components-web/tree/master/packages/mdc-tooltip. Should be available for general consumption in next latest release.

[rolanday]

I tried tooltip support using 8.0.0-canary.2e5711e04.0 and not working. No build or web pack errors and all other MDC components functioning as expected. Can you please confirm it tooltip support is expected to work in this version or not? I followed the README instructions exactly.

Thanks.