From c64acd1fee9b28ca0a10c95852169f765f0ff081 Mon Sep 17 00:00:00 2001
From: Paul Pestov <10750176+paulpestov@users.noreply.github.com>
Date: Mon, 27 Mar 2023 14:43:43 +0200
Subject: [PATCH] feat: enable tooltip on each annotation hover - DISABLED due
 to unclear reqs

---
 examples/ahiqar-arabic-karshuni.html  |   1 -
 index.html                            |   1 -
 jsconfig.json                         |   8 ++
 src/components/Content.vue            |   5 +-
 src/css/_global.scss                  |   2 +-
 src/css/_tooltip.scss                 |  40 ++++++
 src/css/_tooltip.scss~Stashed changes |  40 ++++++
 src/css/style.scss                    |   1 +
 src/i18n/de/index.js                  |   1 +
 src/i18n/en/index.js                  |   1 +
 src/store/annotations/actions.js      | 173 +++++++----------------
 src/utils/annotations.js              | 190 ++++++++++++++------------
 src/utils/dom.js                      |   5 +
 tests/cypress/e2e/content.cy.js       |  20 ++-
 14 files changed, 266 insertions(+), 222 deletions(-)
 create mode 100644 jsconfig.json
 create mode 100644 src/css/_tooltip.scss
 create mode 100644 src/css/_tooltip.scss~Stashed changes

diff --git a/examples/ahiqar-arabic-karshuni.html b/examples/ahiqar-arabic-karshuni.html
index 698b6e40..b1ad5a33 100644
--- a/examples/ahiqar-arabic-karshuni.html
+++ b/examples/ahiqar-arabic-karshuni.html
@@ -6,7 +6,6 @@
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
   <meta name="viewport" content="initial-scale=1,maximum-scale=5,minimum-scale=1,width=device-width">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="dist/tido.css">
   <link rel="stylesheet" href="config-menu/config-menu.css">
   <style>
diff --git a/index.html b/index.html
index 0c056c3c..2fda0472 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,6 @@
   <meta name="msapplication-tap-highlight" content="no">
   <meta name="viewport" content="initial-scale=1, maximum-scale=5, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
 
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
   <style>
     html, body {
       margin: 0;
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..2c8ee2bb
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
diff --git a/src/components/Content.vue b/src/components/Content.vue
index 92155b0e..de2c5acf 100644
--- a/src/components/Content.vue
+++ b/src/components/Content.vue
@@ -79,7 +79,10 @@ export default {
           const root = document.getElementById('text-content');
           this.$store.dispatch('annotations/addHighlightAttributesToText', root);
           await this.$store.dispatch('annotations/addHighlightClickListeners');
-          await this.$store.dispatch('annotations/addHighlightHoverListeners');
+
+          // TODO: Enable Hover + Tooltip feature when reqs are clarified
+          // await this.$store.dispatch('annotations/addHighlightHoverListeners');
+
           this.$store.commit('contents/setActiveContentUrl', this.url);
         }, 100);
       } catch (err) {
diff --git a/src/css/_global.scss b/src/css/_global.scss
index 1e40fb83..9a5d282a 100644
--- a/src/css/_global.scss
+++ b/src/css/_global.scss
@@ -134,7 +134,7 @@ h3 {
   }
 
   .col {
-    flex: 1 1 0%;
+    flex: 1 1 0;
   }
 
   .q-card--dark {
diff --git a/src/css/_tooltip.scss b/src/css/_tooltip.scss
new file mode 100644
index 00000000..fea55985
--- /dev/null
+++ b/src/css/_tooltip.scss
@@ -0,0 +1,40 @@
+#annotation-tooltip {
+  background-color: white;
+  box-shadow: $shadow-3;
+  font-size: 14px;
+  left: 0;
+  opacity: 0;
+  padding: 8px;
+  position: fixed;
+  text-decoration: none;
+  top: 0;
+  transition: opacity 0.4s;
+  max-width: 480px;
+  z-index: 10000;
+  transform: translateY(-100%);
+  border-radius: $generic-border-radius;
+  border: 1px solid #ddd;
+  -webkit-touch-callout: none;
+
+  .body--dark & {
+    background-color: $dark;
+    border: 1px solid #424242;
+  }
+
+  &.annotation-animated-tooltip {
+    opacity: 1;
+  }
+
+  .referenced-annotation {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .referenced-annotation:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .tooltip-body {
+    border-top: 1px solid #ddd;
+  }
+}
diff --git a/src/css/_tooltip.scss~Stashed changes b/src/css/_tooltip.scss~Stashed changes
new file mode 100644
index 00000000..fea55985
--- /dev/null
+++ b/src/css/_tooltip.scss~Stashed changes	
@@ -0,0 +1,40 @@
+#annotation-tooltip {
+  background-color: white;
+  box-shadow: $shadow-3;
+  font-size: 14px;
+  left: 0;
+  opacity: 0;
+  padding: 8px;
+  position: fixed;
+  text-decoration: none;
+  top: 0;
+  transition: opacity 0.4s;
+  max-width: 480px;
+  z-index: 10000;
+  transform: translateY(-100%);
+  border-radius: $generic-border-radius;
+  border: 1px solid #ddd;
+  -webkit-touch-callout: none;
+
+  .body--dark & {
+    background-color: $dark;
+    border: 1px solid #424242;
+  }
+
+  &.annotation-animated-tooltip {
+    opacity: 1;
+  }
+
+  .referenced-annotation {
+    display: block;
+    margin-bottom: 4px;
+  }
+
+  .referenced-annotation:last-of-type {
+    margin-bottom: 0;
+  }
+
+  .tooltip-body {
+    border-top: 1px solid #ddd;
+  }
+}
diff --git a/src/css/style.scss b/src/css/style.scss
index 22be4054..6753e370 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -3,3 +3,4 @@
 @import 'global.scss';
 @import 'scrollbar.scss';
 @import 'highlighting';
+@import 'tooltip';
diff --git a/src/i18n/de/index.js b/src/i18n/de/index.js
index 600822ca..304a7574 100644
--- a/src/i18n/de/index.js
+++ b/src/i18n/de/index.js
@@ -93,4 +93,5 @@ export default {
   other: 'Sonstiges',
   subtitle: 'Untertitel',
   manifest: 'Manifest',
+  more_annotations: 'Weitere'
 };
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 01e2b9f5..3545356e 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -95,4 +95,5 @@ export default {
   other: 'Other',
   subtitle: 'Subtitle',
   manifest: 'Manifest',
+  also_selected: 'Also selected'
 };
diff --git a/src/store/annotations/actions.js b/src/store/annotations/actions.js
index 5d170b56..3db11405 100644
--- a/src/store/annotations/actions.js
+++ b/src/store/annotations/actions.js
@@ -1,6 +1,7 @@
 import * as AnnotationUtils from '@/utils/annotations';
 import { request } from '@/utils/http';
 import * as Utils from '@/utils';
+import { hasParentAnnotation } from "@/utils/annotations";
 
 export const addActiveAnnotation = ({ getters, rootGetters, dispatch }, id) => {
   const { activeAnnotations, annotations } = getters;
@@ -65,15 +66,8 @@ export const setFilteredAnnotations = ({ commit, getters, rootGetters }, types)
 };
 
 export const addHighlightAttributesToText = ({ getters }, dom) => {
-  console.log('addhigh')
   const { annotations } = getters;
 
-  // Add range attributes
-  // [...dom.querySelectorAll('[data-target]:not([value=""])')]
-  //   .map((el) => el.getAttribute('data-target').replace('_start', '').replace('_end', ''))
-  //   .forEach((targetSelector) => Utils.addRangeHighlightAttributes(targetSelector, dom));
-
-  // Add single attributes
   annotations.forEach((annotation) => {
     const { id } = annotation;
     const selector = Utils.generateTargetSelector(annotation);
@@ -147,24 +141,24 @@ export const addHighlightHoverListeners = ({ getters, rootGetters }) => {
 
   const annotationElements = Array.from(document.querySelectorAll('[data-annotation]'));
 
-  annotationElements
-    // Annotations can be nested, so we filter out all outer elements from this selection and
-    // iterate over the deepest elements
-    .filter(el => [...el.childNodes].filter(childNode => childNode.nodeName === '#text').length > 0)
-    .forEach(deepestEl => {
-      console.log(deepestEl)
-      deepestEl.addEventListener(
+  // Annotations can be nested, so we filter out all outer elements from this selection and
+  // iterate over the deepest elements
+  annotationElements.forEach(el => {
+      el.addEventListener(
         'mouseenter',
-        () => {
-          console.log('hover')
-          // Hovering is only supported for selected annotations
-          if (!AnnotationUtils.isAnnotationSelected(deepestEl)) return;
+        ({clientX: x, clientY: y}) => {
+          let elementFromPoint = document.elementFromPoint(x, y);
+
+          if (!elementFromPoint.hasAttribute('data-annotation')) {
+            elementFromPoint = null;
+          }
+
+          const currentElement = elementFromPoint ?? el;
 
           const { filteredAnnotations } = getters;
           const annotationTooltipModels = filteredAnnotations.reduce((acc, curr) => {
             const { id } = curr;
             const name = rootGetters['config/getIconByType'](curr.body['x-content-type']);
-
             acc[id] = {
               value: curr.body.value,
               name,
@@ -172,97 +166,31 @@ export const addHighlightHoverListeners = ({ getters, rootGetters }) => {
             return acc;
           }, {});
 
-          let current = deepestEl;
-
-          const annotationIds = [current.getAttribute('data-annotation-ids')];
-
-          while (current.parentElement.getAttribute('data-annotation')) {
-            annotationIds.push(current.getAttribute('data-annotation-ids'));
-            current = current.parentElement;
-          }
+          const currentAnnotations = Utils.getValuesFromAttribute(currentElement, 'data-annotation-ids');
+          const closestAnnotationId = currentAnnotations[currentAnnotations.length - 1];
+          const closestAnnotationTooltipModel = annotationTooltipModels[closestAnnotationId]
+          let annotationIds = discoverParentAnnotationIds(currentElement);
+          annotationIds = discoverChildAnnotationIds(currentElement, annotationIds);
 
-          // checks for duplicate class names.
-          const currentAnnotationTooltipModels = annotationIds
-            // Flatten
-            .join(' ').split(' ')
-            .map(id => {
-              return annotationTooltipModels[id]
-            })
+          const otherAnnotationTooltipModels = Object.keys(annotationIds)
+            .map(id => annotationTooltipModels[id])
             .filter(m => m);
 
-          AnnotationUtils.createTooltip.bind(
+          AnnotationUtils.createOrUpdateTooltip.bind(
             this,
-            current,
-            currentAnnotationTooltipModels,
-            document.getElementById('text-content')
+            currentElement,
+            { closest: closestAnnotationTooltipModel, other: otherAnnotationTooltipModels },
+            document.getElementById('text-content'),
           )();
         },
         false,
       );
-      deepestEl.addEventListener(
+      el.addEventListener(
         'mouseout',
-        () => document.querySelectorAll('.annotation-tooltip2').forEach((el) => el.remove()),
+        () => document.querySelectorAll('#annotation-tooltip').forEach((el) => el.remove()),
         false,
       );
     });
-
-  return;
-
-
-  const { filteredAnnotations } = getters;
-  const annotationIds = filteredAnnotations.reduce((acc, curr) => {
-    const { id } = curr;
-    const name = rootGetters['config/getIconByType'](curr.body['x-content-type']);
-
-    acc[AnnotationUtils.stripAnnotationId(id)] = {
-      value: curr.body.value,
-      name,
-    };
-    return acc;
-  }, {});
-
-  document.querySelectorAll('[data-annotation]')
-    .forEach((el) => {
-      const hasChildNodes = [...el.childNodes].filter((x) => x.nodeName !== '#text').length > 0;
-
-      if (!hasChildNodes) {
-        const classNames = [];
-        el = AnnotationUtils.getHighestParentAnnotationElement(el);
-        const annotationClasses = [];
-
-        // checks for duplicate class names.
-        classNames
-          .join(' ')
-          .split(' ')
-          .map((x) => annotationIds[x])
-          .filter((x) => x)
-          .reduce((acc, curr) => {
-            if (!acc[curr.value]) {
-              acc[curr.value] = true;
-              annotationClasses.push(curr);
-            }
-            return acc;
-          }, {});
-
-        if (annotationClasses.length) {
-          el.addEventListener(
-            'mouseenter',
-            () => {
-              if (AnnotationUtils.isAnnotationSelected(el)) {
-                console.log('sel')
-                AnnotationUtils.createTooltip.bind(this, el, annotationClasses)();
-              }
-            },
-            false,
-          );
-          el.addEventListener(
-            'mouseout',
-            () => document.querySelectorAll('.annotation-tooltip').forEach((el) => el.remove()),
-            false,
-          );
-        }
-      }
-    });
 };
 
 export const addHighlightClickListeners = ({ dispatch, getters }) => {
@@ -291,7 +219,7 @@ export const addHighlightClickListeners = ({ dispatch, getters }) => {
     // Next we look up which annotations need to be selected
     let annotationIds = {};
 
-    getValuesFromAttribute(target, 'data-annotation-ids').forEach((value) => annotationIds[value] = true);
+    Utils.getValuesFromAttribute(target, 'data-annotation-ids').forEach((value) => annotationIds[value] = true);
     annotationIds = discoverParentAnnotationIds(target, annotationIds);
     annotationIds = discoverChildAnnotationIds(target, annotationIds);
 
@@ -325,32 +253,6 @@ export const addHighlightClickListeners = ({ dispatch, getters }) => {
     }
     return getNearestParentAnnotation(parent);
   }
-
-  function getValuesFromAttribute(element, attribute) {
-    const value = element.getAttribute(attribute);
-    return value ? value.split(' ') : [];
-  }
-
-  function discoverParentAnnotationIds(el, annotationIds = {}) {
-    const parent = el.parentElement;
-    if (parent && parent.id !== 'text-content') {
-      getValuesFromAttribute(parent, 'data-annotation-ids').forEach((value) => annotationIds[value] = true);
-      return discoverParentAnnotationIds(parent, annotationIds);
-    }
-    return annotationIds;
-  }
-
-  function discoverChildAnnotationIds(el, annotationIds = {}) {
-    const { children } = el;
-
-    [...children].forEach((child) => {
-      if (child.dataset.annotation) {
-        getValuesFromAttribute(child, 'data-annotation-ids').forEach((value) => annotationIds[value] = true);
-        annotationIds = discoverChildAnnotationIds(child, annotationIds);
-      }
-    });
-    return annotationIds;
-  }
 };
 
 export const selectAll = ({ getters, dispatch }) => {
@@ -362,3 +264,24 @@ export const selectNone = ({ getters, dispatch }) => {
   const { filteredAnnotations, activeAnnotations } = getters;
   filteredAnnotations.forEach(({ id }) => activeAnnotations[id] && dispatch('removeActiveAnnotation', id));
 };
+
+function discoverParentAnnotationIds(el, annotationIds = {}) {
+  const parent = el.parentElement;
+  if (parent && parent.id !== 'text-content') {
+    Utils.getValuesFromAttribute(parent, 'data-annotation-ids').forEach((value) => annotationIds[value] = true);
+    return discoverParentAnnotationIds(parent, annotationIds);
+  }
+  return annotationIds;
+}
+
+function discoverChildAnnotationIds(el, annotationIds = {}) {
+  const { children } = el;
+
+  [...children].forEach((child) => {
+    if (child.dataset.annotation) {
+      Utils.getValuesFromAttribute(child, 'data-annotation-ids').forEach((value) => annotationIds[value] = true);
+      annotationIds = discoverChildAnnotationIds(child, annotationIds);
+    }
+  });
+  return annotationIds;
+}
diff --git a/src/utils/annotations.js b/src/utils/annotations.js
index a944a56a..157afb17 100644
--- a/src/utils/annotations.js
+++ b/src/utils/annotations.js
@@ -88,54 +88,54 @@ export const createSvgIcon = (name) => {
   return svg;
 };
 
-export function createTooltip(element, data, root) {
-  const tooltipEl = document.createElement('span');
-  tooltipEl.setAttribute('data-annotation-classes', `${element.className}`);
-  tooltipEl.setAttribute('class', 'annotation-tooltip');
+export async function createOrUpdateTooltip(element, { closest: closestAnnotation, other: otherAnnotations }, root) {
+  const tooltipId = 'annotation-tooltip';
+  let tooltipEl = root.querySelector(tooltipId);
+
+  if (!tooltipEl) {
+    tooltipEl = document.createElement('div');
+    root.onmousemove = null;
+
+    root.addEventListener('mousemove', event => {
+      const {clientX: x , clientY: y } = event;
+      tooltipEl.style.top = `${y}px`;
+      tooltipEl.style.left = `${x}px`;
+    });
+    root.append(tooltipEl);
+  }
 
-  const isMultiple = data.length > 1;
+  tooltipEl.id = tooltipId;
+
+  // Display the current annotation that the user has hovered on
+  const closestAnnotationTemplate = `
+    <div class="referenced-annotation">
+      ${createSvgIcon(closestAnnotation.name)?.outerHTML}<span>${closestAnnotation.value}</span>
+    </div>
+  `;
 
-  let annotationLists = '';
-  data.forEach((item) => {
-    annotationLists += `
+  const isMultiple = otherAnnotations.length > 1;
+
+  let otherAnnotationsTemplate = '';
+
+  otherAnnotations.forEach((item) => {
+    otherAnnotationsTemplate += `
       <div class="referenced-annotation">
-        ${createSvgIcon(item.name).outerHTML}
-          <span>
-            ${item.value}
-          </span>
+        ${createSvgIcon(item.name)?.outerHTML}<span>${item.value}</span>
       </div>
       `;
   });
 
-  const text = `
-    <span class="text-body1">
-    ${
-  !isMultiple
-    ? `${i18n.global.t('referenced_annotation')}`
-    : `${i18n.global.t('referenced_annotations')}`
-}:
-      </span>
-      <br>
-      <div class="text-body2">
-      ${annotationLists}
-      </div>
-  `;
-
-  tooltipEl.innerHTML = text;
-  const tooltipId = `${element.className
-    .split(' ')
-    .join('')}annotation-tooltip`;
-  tooltipEl.setAttribute('id', tooltipId);
-  //window.top.el = element;
+  let template = `
+    <div class="tooltip-header">${closestAnnotationTemplate}</div>`;
 
-  element.style.position = 'relative';
-  const r = element.getBoundingClientRect();
-
-  console.log(element.scrollTop)
-  // tooltipEl.style.top = `${r.y + r.height}px`;
-  // tooltipEl.style.left = `${r.x}px`;
+  if (otherAnnotations.length > 0)
+    template += `<div class="tooltip-body q-mt-sm">
+        <h4 class="q-my-sm">${i18n.global.t('more_annotations')}:</h4>
+        <div class="text-body2">${otherAnnotationsTemplate}</div>
+      </div>
+    `;
 
-  element.append(tooltipEl);
+  tooltipEl.innerHTML = template;
 
   setTimeout(() => tooltipEl.classList.add('annotation-animated-tooltip'), 10);
 }
@@ -182,13 +182,6 @@ export function stripSelector(value) {
     .replace('_end]', '')}`;
 }
 
-export function stripAnnotationId(url) {
-  if (!url) {
-    return '';
-  }
-  return url.split('/').pop();
-}
-
 export function updateTextContentClass(element, task = 'add', ...className) {
   if (!element) {
     return;
@@ -213,60 +206,79 @@ export function getAllElementsFromSelector(selector) {
   return [...document.querySelectorAll(selector)];
 }
 
-export const getHighestParentAnnotationElement = (el) => {
+export const isHighestAnnotationElement = (el) => {
   let current = el;
 
-  while (
-    current.parentElement.getAttribute('data-annotation')
-    && current.parentElement.childNodes.length === 1
-  ) {
-    classNames.push(current.className);
+  while (current.parentElement.getAttribute('data-annotation')) {
     current = current.parentElement;
   }
 
-  return el;
+  return current && current !== el;
 };
 
-export const isAnnotationSelected = (el) => {
-  const key = el.getAttribute('class');
-  if (el[key] !== undefined) {
-    return el[key];
-  }
-  const innerQueue = [];
-
-  // this logic checks the child spans and their classes.
-  innerQueue.push(el);
-  let matched = false;
-
-  while (innerQueue.length) {
-    const popped = innerQueue.pop();
-    if (parseInt(popped.getAttribute('data-annotation-level'), 10) > 0) {
-      matched = true;
-    } else {
-      [...popped.children].forEach((child) => {
-        innerQueue.push(child);
-      });
-    }
-  }
+export const hasParentAnnotation = (el) => {
+  const maxLevelEl = document.getElementById('text-content');
 
-  // this logic checks the outer spans and their classes.
-  if (!matched) {
-    const outerQueue = [];
-    outerQueue.push(el);
-
-    while (outerQueue.length) {
-      const popped = outerQueue.pop();
-      if (parseInt(popped.getAttribute('data-annotation-level'), 10) > 0) {
-        matched = true;
-      } else if (popped.parentElement.getAttribute('data-annotation')) {
-        outerQueue.push(popped.parentElement);
-      }
+  let current = el;
+  let hasParent = false;
+  while (current !== maxLevelEl) {
+    current = current.parentElement;
+    if (current.hasAttribute('data-annotation')) {
+      hasParent = true;
+      break;
     }
   }
 
-  return matched;
+  return hasParent;
 };
 
+
+export function isAnnotationSelected(el) {
+  if (!el.hasAttribute('data-annotation-level')) return false;
+  return parseInt(el.getAttribute('data-annotation-level'), 10) > 0;
+}
+
+
+// export const isAnnotationSelected = (el) => {
+//   const key = el.getAttribute('data-annotation-level');
+//   if (el[key] !== undefined) {
+//     return el[key];
+//   }
+//   const innerQueue = [];
+//
+//   // this logic checks the child spans and their classes.
+//   innerQueue.push(el);
+//   let matched = false;
+//
+//   while (innerQueue.length) {
+//     const popped = innerQueue.pop();
+//     if (parseInt(popped.getAttribute('data-annotation-level'), 10) > 0) {
+//       matched = true;
+//     } else {
+//       [...popped.children].forEach((child) => {
+//         innerQueue.push(child);
+//       });
+//     }
+//   }
+//
+//   // this logic checks the outer spans and their classes.
+//   if (!matched) {
+//     const outerQueue = [];
+//     outerQueue.push(el);
+//
+//     while (outerQueue.length) {
+//       const popped = outerQueue.pop();
+//       if (parseInt(popped.getAttribute('data-annotation-level'), 10) > 0) {
+//         matched = true;
+//       } else if (popped.parentElement.getAttribute('data-annotation')) {
+//         outerQueue.push(popped.parentElement);
+//       }
+//     }
+//   }
+//
+//   return matched;
+// };
+
 export function generateTargetSelector(annotation) {
   // This function generates a CSS selector from
   // different possible sources within the annotation object.
@@ -291,10 +303,6 @@ export function generateTargetSelector(annotation) {
     result = handleRangeSelector(selector);
   }
 
-  return result;
-  console.log(result)
-
-
   const isValid = Utils.isSelectorValid(result);
 
   return isValid ? result : null;
diff --git a/src/utils/dom.js b/src/utils/dom.js
index 5b7586b9..3a87dcfc 100644
--- a/src/utils/dom.js
+++ b/src/utils/dom.js
@@ -73,3 +73,8 @@ export function elemToSelector(el) {
 
   return elemToSelector(el.parentNode) + ' > ' + str;
 }
+
+export function getValuesFromAttribute(element, attribute) {
+  const value = element.getAttribute(attribute);
+  return value ? value.split(' ') : [];
+}
diff --git a/tests/cypress/e2e/content.cy.js b/tests/cypress/e2e/content.cy.js
index bff4a4a5..2506a0b3 100644
--- a/tests/cypress/e2e/content.cy.js
+++ b/tests/cypress/e2e/content.cy.js
@@ -30,8 +30,9 @@ describe('Content - Multiple Tabs', () => {
   it('Should highlight from text', () => {
     // Test content
     cy
-      .get('.panels-target > .item:nth-child(3) #text-content')
+      .get('@content')
       .contains('ܚܝܩܪ')
+      .parent()
       .should('have.attr', 'data-annotation-level', '0')
       .click()
       .should('have.attr', 'data-annotation-level', '1')
@@ -56,8 +57,9 @@ describe('Content - Multiple Tabs', () => {
 
     // Test content
     cy
-      .get('.panels-target > .item:nth-child(3) #text-content')
+      .get('@content')
       .contains('ܚܝܩܪ')
+      .parent()
       .should('have.attr', 'data-annotation-level', '1')
       .and('have.css', 'background-color', 'rgb(227, 242, 253)')
       .get('svg')
@@ -144,6 +146,20 @@ describe('Content - Multiple Tabs', () => {
       .first()
       .should('have.attr', 'style', 'font-size: 14px;');
   });
+
+  // it('Should display a tooltip on hover', () => {
+  //   cy
+  //     .get('@content')
+  //     .contains('ܚܝܩܪ')
+  //     .parent()
+  //     .should('have.attr', 'data-annotation-level', '0')
+  //     .trigger('mouseenter');
+  //
+  //   cy
+  //     .get('#annotation-tooltip')
+  //     .wait(100)
+  //     .should('be.visible')
+  // })
 });
 
 describe('Content - Multiple Tabs with different manifest', () => {