He estado configurando una guía web simple sin usar ningún marco, simplemente usando componentes de diseño de materiales separados. Con muchos de estos no tuve problemas (he implementado con éxito botones con efectos dominó, tarjetas, pestañas...) pero no puedo hacer que la información sobre herramientas funcione. Siguiendo la documentación , he intentado muchas cosas para que aparezcan, pero no se muestran.

Están incluidos en mi CSS:

 @use "@material/tooltip/styles";

Instanciado en mi JS:

 import {MDCTooltip} from '@material/tooltip'; const tooltip = new MDCTooltip(document.querySelector('.mdc-tooltip'));

E implementado en mi HTML según el ejemplo dado, primero se declara la información sobre herramientas en el cuerpo:

 <div id="tooltip-1" class="mdc-tooltip" role="tooltip" aria-hidden="true"> <div class="mdc-tooltip__surface mdc-tooltip__surface-animation"> TestyMcTest </div> </div>

... y luego la información sobre herramientas se adjunta a otro elemento en el mismo cuerpo:

 <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>

El div de información sobre herramientas se hace invisible (que es el comportamiento esperado); sin embargo, no aparece nada al pasar el mouse sobre el objeto vinculado (en este caso, una tarjeta, pero probé con varios tipos de contenedores y no pude hacer que nada funcionara).

Gracias por cualquier ayuda.