Появление облака пояснений при наведении, вместо нажатия

При нажатии на выделенный текст появляется блок с пояснением.

Как сделать так, что бы вместо нажатия достаточно было просто наведения курсора.

        // Fetch notes
    useEffect(() => {
        if (!container) return;
        notes = {};
        const links = container.querySelectorAll("a");
        for (const link of links) {
            ProviderTest.getNote(link).then(note => {
                notes[link.pathname] = note;
                link.classList.add("fetched");
            });
            link.onclick = (event) => {
                event.preventDefault();
                if (!notes[link.pathname]) return;
                showNote(link, notes[link.pathname]);
            }
        }
    }, [lyrics])

Я попробовал вместо link.onclick = (event) => { сделать link.onmouseover = (event) => {и в целом всё работает нормально, но только для того, что бы скрыть пояснение нужно ещё раз навести на выделенный текст, или на блок самого пояснения, а не просто убрать курсор. Ещё порой случается, если это конец страницы, то пояснение беспрерывно появляется-убирается. Ну и ещё в целом выскакивает пояснение слишком резко. В общем, работает, но колхозно. Может есть варианты получше? Именно с этим кодом, глобально ничего не меняя.