Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[mdc-tooltip] mdc-tooltip__action CSS class is not present

See original GitHub issue

Bug report

Looks like mdc-tooltip__action CSS class is not present anywhere in this repo. This causes tooltip actions to not be properly styled.

Tested with mdc@13.0.0

Steps to reproduce

Render any of the interactive samples in mdc-tooltip/README.md

Actual behavior

Action elements use default browser styles

Expected behavior

Action elements properly styled

Screenshots

Your Environment:

Software	Version(s)
MDC Web	13.0.0
Browser	Firefox
Operating System	Linux/Ubuntu

Additional context

Possible solution

Issue Analytics

State:
Created 2 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

sayriscommented, Jan 26, 2022

Hmmm… how about this: https://github.com/material-components/material-components-web/commit/933e58054e0f7bca14ec826e46a759f5356b0b3a?

The html snippets for rich tooltips were incorrect – rather than using a native button with class="mdc-tooltip__action", mdc buttons should be used. The docs are updated to include html for a basic filled button.

1reaction

sayriscommented, Jan 26, 2022

Huh, guess the PR did not get linked – anyways this was addressed in https://github.com/material-components/material-components-web/pull/7504

Top Results From Across the Web

matTooltipClass not applying css - Stack Overflow

None line there for your component where you want to use your custom tooltip class, it ought to work. It's how I fixed...

not() - CSS: Cascading Style Sheets - MDN Web Docs

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, ...

Tooltip - Angular Material

To work around the conflict, Angular Material disables native gestures on the trigger, but that might not be desirable on particular elements (e.g....

CSS :not() with Multiple Classes

Say you want to select an element when it doesn't have a certain class. That's what the :not() selector is for.

Tooltips - Material Design

<div id="tooltip-id" class="mdc-tooltip" role="tooltip" ... Default rich tooltips are shown when users hover over or focus on their anchor element.