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.