I have been setting up a simple web guide without using any framework, by just using separate Material Design Components. Many of these I had no issues with (I have successfully implemented buttons with ripple effects, cards, tabs...) but I can not get tooltips to work. Following the documentation, I have tried many things to make them appear, but they do not show.
They are included in my CSS:
@use "@material/tooltip/styles";
Instanciated in my JS:
import {MDCTooltip} from '@material/tooltip';
const tooltip = new MDCTooltip(document.querySelector('.mdc-tooltip'));
And implemented in my HTML as per the example given, first the tooltip is declared in the body:
<div id="tooltip-1" class="mdc-tooltip" role="tooltip" aria-hidden="true">
<div class="mdc-tooltip__surface mdc-tooltip__surface-animation">
TestyMcTest
</div>
</div>
...and then the tooltip is attached to another element in the same body:
<div aria-describedby="tooltip-1" class="mdc-card in-card-margins">
<div>The status of these data updates can be observed in the blabla</div>
</div>
The tooltip div is made invisible (which is expected behaviour), however, nothing shows up when mousing over the linked object (in this instance a card, but I tried with multiple types of containers and I could not get anything to work).
Thank you for any help.
