Persistent HoverTooltip after annotation is deleted

[RonyKordahi]

I was trying out the hover-tooltip plugin, in the hopes of rigging a little solution together since custom widgets aren't functional in React yet annotorious-openseadragon (#179), and I ran into some bugs both when testing it in JavaScript (cloned the annotorious-v2-plugins repo and ran it) and in React.

The bugs are similar in both a JavaScript environment and in the React environment. Though React takes them a step further.

Bugs in JavaScript:

• Selecting an annotation makes the tooltip freeze in place inside the annotation. As long as the cursor is hovering over the annotation, the tooltip is visible. The good news is the tooltip disappears when the cursor exits the annotation.
• Deleting an annotation while hovering over it causes the tooltip to remain in it's last position on the page permanently.

Bugs in React:

• Selecting an annotation makes the tooltip freeze in place inside the annotation. The tooltip never disappears even when the cursor exits the annotation. Selecting the annotation again after exiting and re-entering it places another tooltip. An infinite number of "stuck" tooltips can be created this way.
• Deleting an annotation does not get rid of the "stuck" tooltips.
• Deleting an annotation while hovering over it causes the tooltip to remain in it's last position on the page permanently. As an added bonus, this also throws 2 error messages (screenshot below).

EDIT: Modified link name for issue 179
EDIT 2: I forgot to mention, I have disableEditor: true and I'm deleting the annotations with the DELETE key on my keyboard.

[RonyKordahi]

In case it's helpful, this is how I have it implemented in React:

1. Installed the package: yarn add @recogito/annotorious-hover-tooltip
2. At the top of my file, imported the package: import HoverTooltip from "@recogito/annotorious-hover-tooltip";
3. In my code, initiated the tooltip:

        const config = { readOnly: false, disableEditor: true, disableSelect: false, allowEmpty: true}
        const annoInstance = Annotorious(initViewer, config);
        HoverTooltip(annoInstance);
        setAnno(annoInstance);

In JavaScript I just cloned the annotorious-v2-plugins, navigated to the annotorious-hover-tooltip folder, ran yarn install then yarn start.

EDIT: added JS process

[RonyKordahi]

This seems to work for me in React. This is far from the ideal solution but it gets the job done:

    let tooltip = null;

    const onMouseMove = evt => {
        tooltip.style.top = `${evt.offsetY}px`;
        tooltip.style.left = `${evt.offsetX}px`;
    }

    const showTooltip = (annotation, shape) => {

        tooltip = document.createElement('div');
        tooltip.setAttribute('class', 'a9s-hover-tooltip');

        tooltip.innerHTML = annotation.body[0].value;

        anno._element.appendChild(tooltip);

        shape.addEventListener('mousemove', onMouseMove);

    }

    const hideTooltip = (annotation, shape) => {

        const liveAnnotations = Array.from(document.getElementsByClassName("a9s-annotation"));

        const appended = liveAnnotations.find(liveAnnotation => {
            return liveAnnotation.dataset.id === annotation.id;
        })

        // Prevents the "o.removeEventListener is not a function" error message
        if (appended) {
            shape.removeEventListener('mousemove', onMouseMove);
        }
        
        if (tooltip) {
            anno._element.removeChild(tooltip);
            tooltip = null;
        }
    }

    const mouseEnterAnnotation = (annotation, shape) => {
        // Necessary to hide on mouseEnter because if an annotation is clicked, it loses the "annotation-hover"
        // losing the class causes the tooltip to be glued to the annotation.
        hideTooltip(annotation, shape);
        showTooltip(annotation, shape);
    }

    const mouseLeaveAnnotation = (annotation, shape) => {
        hideTooltip(annotation, shape);
    }

And my deleteAnnotation event handler looks like this:

    const deleteAnnotation = (annotation) => {
        const newAnnotations = annotationsList.filter(val => val.id !== annotation.id)
        setAnnotationsList(newAnnotations);
        modifyLocalAnnotations(newAnnotations);
        hideTooltip(annotation);
    };

EDIT: Typo