diff --git a/core/src/main/java/de/jplag/reporting/jsonfactory/ComparisonReportWriter.java b/core/src/main/java/de/jplag/reporting/jsonfactory/ComparisonReportWriter.java
index 28445ab36..0396290c8 100644
--- a/core/src/main/java/de/jplag/reporting/jsonfactory/ComparisonReportWriter.java
+++ b/core/src/main/java/de/jplag/reporting/jsonfactory/ComparisonReportWriter.java
@@ -112,16 +112,20 @@ private Match convertMatchToReportMatch(JPlagComparison comparison, de.jplag.Mat
 
         int startLineFirst = startOfFirst.getLine();
         int startColumnFirst = startOfFirst.getColumn();
+        int startTokenFirst = match.startOfFirst();
         int endLineFirst = endOfFirst.getLine();
         int endColumnFirst = endOfFirst.getColumn() + endOfFirst.getLength() - 1;
+        int endTokenFirst = match.endOfFirst();
 
         int startLineSecond = startOfSecond.getLine();
         int startColumnSecond = startOfSecond.getColumn();
+        int startTokenSecond = match.startOfSecond();
         int endLineSecond = endOfSecond.getLine();
         int endColumnSecond = endOfSecond.getColumn() + endOfSecond.getLength() - 1;
+        int endTokenSecond = match.endOfSecond();
 
-        return new Match(firstFileName, secondFileName, startLineFirst, startColumnFirst, endLineFirst, endColumnFirst, startLineSecond,
-                startColumnSecond, endLineSecond, endColumnSecond, match.length());
+        return new Match(firstFileName, secondFileName, startLineFirst, startColumnFirst, startTokenFirst, endLineFirst, endColumnFirst,
+                endTokenFirst, startLineSecond, startColumnSecond, startTokenSecond, endLineSecond, endColumnSecond, endTokenSecond, match.length());
     }
 
 }
diff --git a/core/src/main/java/de/jplag/reporting/reportobject/model/Match.java b/core/src/main/java/de/jplag/reporting/reportobject/model/Match.java
index 5ef5d728c..3c225633a 100644
--- a/core/src/main/java/de/jplag/reporting/reportobject/model/Match.java
+++ b/core/src/main/java/de/jplag/reporting/reportobject/model/Match.java
@@ -3,8 +3,10 @@
 import com.fasterxml.jackson.annotation.JsonProperty;
 
 public record Match(@JsonProperty("file1") String firstFileName, @JsonProperty("file2") String secondFileName,
-        @JsonProperty("start1") int startInFirst, @JsonProperty("start1_col") int startColumnInFirst, @JsonProperty("end1") int endInFirst,
-        @JsonProperty("end1_col") int endColumnInFirst, @JsonProperty("start2") int startInSecond,
-        @JsonProperty("start2_col") int startColumnInSecond, @JsonProperty("end2") int endInSecond, @JsonProperty("end2_col") int endColumnInSecond,
+        @JsonProperty("start1") int startInFirst, @JsonProperty("start1_col") int startColumnInFirst,
+        @JsonProperty("startToken1") int startTokenInFirst, @JsonProperty("end1") int endInFirst, @JsonProperty("end1_col") int endColumnInFirst,
+        @JsonProperty("endToken1") int endTokenInFirst, @JsonProperty("start2") int startInSecond,
+        @JsonProperty("start2_col") int startColumnInSecond, @JsonProperty("startToken2") int startTokenInSecond,
+        @JsonProperty("end2") int endInSecond, @JsonProperty("endToken2") int endTokenInSecond, @JsonProperty("end2_col") int endColumnInSecond,
         @JsonProperty("tokens") int tokens) {
 }
diff --git a/report-viewer/index.html b/report-viewer/index.html
index f4fedd2bd..24ca69e3c 100644
--- a/report-viewer/index.html
+++ b/report-viewer/index.html
@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>JPlag Report Viewer</title>
   </head>
-  <body>
+  <body style="overflow: hidden">
     <noscript>
       <strong
         >We're sorry but the JPlag Report Viewer does not work properly without JavaScript enabled.
diff --git a/report-viewer/src/components/ComparisonsTable.vue b/report-viewer/src/components/ComparisonsTable.vue
index f5607b316..136d9d0b1 100644
--- a/report-viewer/src/components/ComparisonsTable.vue
+++ b/report-viewer/src/components/ComparisonsTable.vue
@@ -120,7 +120,11 @@
                     }"
                     class="flex w-full justify-center text-center"
                   >
-                    <ToolTipComponent class="w-fit" direction="left">
+                    <ToolTipComponent
+                      class="w-fit"
+                      direction="left"
+                      :tool-tip-container-will-be-centered="true"
+                    >
                       <template #default>
                         {{ clusters?.[item.clusterIndex].members?.length }}
                         <FontAwesomeIcon
diff --git a/report-viewer/src/components/ToolTipComponent.vue b/report-viewer/src/components/ToolTipComponent.vue
index 954084024..f80c29fce 100644
--- a/report-viewer/src/components/ToolTipComponent.vue
+++ b/report-viewer/src/components/ToolTipComponent.vue
@@ -1,76 +1,97 @@
 <template>
-  <div class="group relative inline-block">
-    <slot></slot>
-    <div
-      class="invisible absolute z-10 rounded-md px-1 text-center text-white delay-0 group-hover:visible group-hover:delay-200"
-      :style="tooltipPosition"
+  <div class="group pointer-events-none inline">
+    <div ref="contentRef" class="pointer-events-auto"><slot></slot></div>
+    <span
+      class="invisible absolute box-border delay-0 group-hover:visible group-hover:delay-200"
+      ref="tooltipRef"
+      v-if="$slots.tooltip"
     >
-      <slot name="tooltip"></slot>
-      <div class="absolute border-4 border-solid" :style="arrowStyle" v-if="$slots.tooltip">
-        <!-- Arrow -->
-      </div>
-    </div>
+      <span
+        class="arrowBase pointer-events-auto relative z-10 block rounded-md bg-tooltip px-1 text-center text-white after:absolute after:border-4 after:border-solid after:border-transparent"
+        :style="tooltipPosition"
+        :class="{
+          'after:top-1/2 after:-mt-1': props.direction == 'left' || props.direction == 'right',
+          'after:!left-1/2 after:-ml-1': props.direction == 'top' || props.direction == 'bottom',
+          'after:top-full after:!border-t-tooltip': props.direction == 'top',
+          'after:bottom-full after:!border-b-tooltip': props.direction == 'bottom',
+          'after:left-full after:!border-l-tooltip': props.direction == 'left',
+          'after:right-full after:!border-r-tooltip': props.direction == 'right'
+        }"
+      >
+        <slot name="tooltip"></slot>
+      </span>
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { ToolTipDirection } from '@/model/ui/ToolTip'
-import { computed, type PropType, type StyleValue } from 'vue'
+import { computed, ref, type PropType, type Ref, type StyleValue } from 'vue'
 
 const props = defineProps({
   direction: {
     type: String as PropType<ToolTipDirection>,
     required: false,
     default: 'top'
+  },
+  /** Sometimes the absolute div is centered horizontally on the content. Set this to true if that is the case. */
+  toolTipContainerWillBeCentered: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  /** Can be set if the tooltip is inside a scrollable container */
+  scrollOffsetX: {
+    type: Number,
+    required: false,
+    default: 0
+  },
+  scrollOffsetY: {
+    type: Number,
+    required: false,
+    default: 0
   }
 })
 
-const opacity = 0.8
+const contentRef: Ref<HTMLElement | null> = ref(null)
+const tooltipRef: Ref<HTMLElement | null> = ref(null)
+const arrowOffset = 4
 
 const tooltipPosition = computed(() => {
   const style: StyleValue = {}
-
-  if (props.direction == 'left' || props.direction == 'right') {
-    style.top = '50%'
-    style.transform = 'translateY(-50%)'
-    if (props.direction == 'left') {
-      style.right = '105%'
-    } else {
-      style.left = '105%'
-    }
-  } else {
-    style.left = '50%'
-    style.transform = 'translateX(-50%)'
-    if (props.direction == 'top') {
-      style.bottom = '105%'
-    } else {
-      style.top = '105%'
-    }
+  const contentDiv = contentRef.value
+  const tooltipDiv = tooltipRef.value
+  if (!contentDiv || !tooltipDiv) {
+    return style
   }
-  style.backgroundColor = `rgba(0,0,0,${opacity})`
-
-  return style
-})
-
-const arrowStyle = computed(() => {
-  const style: StyleValue = {}
-  style.content = ' '
-
-  style.borderColor = ''
-  for (const dir of ['top', 'right', 'bottom', 'left']) {
-    style.borderColor += dir == props.direction ? `rgba(0,0,0,${opacity}) ` : 'transparent '
+  // zeros the tooltip on the topleft of the content
+  let top = -contentDiv.offsetHeight - props.scrollOffsetY
+  let left =
+    (props.toolTipContainerWillBeCentered ? -contentDiv.offsetWidth / 2 : 0) - props.scrollOffsetX
+  if (props.direction == 'right' || props.direction == 'left') {
+    top += (contentDiv.offsetHeight - tooltipDiv.offsetHeight) / 2
+  } else {
+    left -= (tooltipDiv.offsetWidth - contentDiv.offsetWidth) / 2
   }
 
-  if (props.direction == 'left' || props.direction == 'right') {
-    style.top = '50%'
-    style.marginTop = '-4px'
+  if (props.direction == 'right') {
+    left += contentDiv.offsetWidth + arrowOffset
+  } else if (props.direction == 'left') {
+    left -= tooltipDiv.offsetWidth + arrowOffset
+  } else if (props.direction == 'bottom') {
+    top += contentDiv.offsetHeight + arrowOffset
   } else {
-    style.left = '50%'
-    style.marginLeft = '-4px'
+    top -= tooltipDiv.offsetHeight + arrowOffset
   }
 
-  style[props.direction] = '100%'
-
+  style.top = top + 'px'
+  style.left = left + 'px'
   return style
 })
 </script>
+
+<style scoped>
+.arrowBase::after {
+  content: ' ';
+}
+</style>
diff --git a/report-viewer/src/components/fileDisplaying/MatchList.vue b/report-viewer/src/components/fileDisplaying/MatchList.vue
index 760906d47..100195277 100644
--- a/report-viewer/src/components/fileDisplaying/MatchList.vue
+++ b/report-viewer/src/components/fileDisplaying/MatchList.vue
@@ -16,16 +16,48 @@
 
     <div
       class="print-excact flex w-full flex-row space-x-1 overflow-x-auto print:flex-wrap print:space-y-1 print:overflow-x-hidden"
+      ref="scrollableList"
+      @scroll="updateScrollOffset()"
     >
-      <OptionComponent
+      <ToolTipComponent
+        :direction="getTooltipDirection(index)"
         v-for="[index, match] in matches?.entries()"
-        :style="{ background: getMatchColor(0.3, match.colorIndex) }"
-        v-bind:key="index"
-        @click="$emit('matchSelected', match)"
-        :label="
-          getFileName(match.firstFile) + ' - ' + getFileName(match.secondFile) + ': ' + match.tokens
-        "
-      />
+        :key="index"
+        :scrollOffsetX="scrollOffsetX"
+      >
+        <template #default>
+          <OptionComponent
+            :style="{ background: getMatchColor(0.3, match.colorIndex) }"
+            @click="$emit('matchSelected', match)"
+            :label="
+              getFileName(match.firstFile) +
+              ' - ' +
+              getFileName(match.secondFile) +
+              ': ' +
+              match.tokens
+            "
+          />
+        </template>
+        <template #tooltip>
+          <p class="whitespace-pre text-sm">
+            Match between {{ getFileName(match.firstFile) }} (Line {{ match.startInFirst.line }}-{{
+              match.endInFirst.line
+            }}) and {{ getFileName(match.secondFile) }} (Line {{ match.startInSecond.line }}-{{
+              match.endInSecond.line
+            }}) <br />
+            Match is {{ match.tokens }} tokens long. <br />
+            <span v-if="showTokenRanges(match)">
+              Token indeces of match: {{ match.startInFirst.tokenListIndex }}-{{
+                match.endInFirst.tokenListIndex
+              }}
+              and {{ match.startInSecond.tokenListIndex }}-{{ match.endInSecond.tokenListIndex }}.
+              <br />
+            </span>
+
+            Click to show in code view.
+          </p>
+        </template>
+      </ToolTipComponent>
     </div>
   </div>
 
@@ -59,8 +91,10 @@ import type { Match } from '@/model/Match'
 import OptionComponent from '../optionsSelectors/OptionComponent.vue'
 import ToolTipComponent from '@/components/ToolTipComponent.vue'
 import { getMatchColor } from '@/utils/ColorUtils'
+import type { ToolTipDirection } from '@/model/ui/ToolTip'
+import { ref, type Ref } from 'vue'
 
-defineProps({
+const props = defineProps({
   /**
    * Matches of the comparison.
    * type: Array<Match>
@@ -87,4 +121,30 @@ defineEmits(['matchSelected'])
 function getFileName(fullPath: string) {
   return fullPath.split(/[/\\]/g).pop() || ''
 }
+
+function getTooltipDirection(index: number): ToolTipDirection {
+  if (index == 0) return 'right'
+  if (index >= 2 && index + 2 >= (props.matches?.length ?? Infinity)) {
+    return 'left'
+  }
+  return 'bottom'
+}
+
+function showTokenRanges(match: Match) {
+  return (
+    !isNaN(match.startInFirst.tokenListIndex) &&
+    !isNaN(match.startInSecond.tokenListIndex) &&
+    !isNaN(match.endInFirst.tokenListIndex) &&
+    !isNaN(match.endInSecond.tokenListIndex)
+  )
+}
+
+const scrollableList: Ref<HTMLElement | null> = ref(null)
+const scrollOffsetX = ref(0)
+
+function updateScrollOffset() {
+  if (scrollableList.value) {
+    scrollOffsetX.value = scrollableList.value.scrollLeft
+  }
+}
 </script>
diff --git a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
index 1e825d587..6be436228 100644
--- a/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
+++ b/report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue
@@ -7,7 +7,11 @@
       {{ title }}
     </div>
     <div v-for="[index, label] in labels.entries()" :key="index">
-      <ToolTipComponent v-if="(label as ToolTipLabel).displayValue !== undefined" direction="right">
+      <ToolTipComponent
+        v-if="(label as ToolTipLabel).displayValue !== undefined"
+        direction="right"
+        :tool-tip-container-will-be-centered="true"
+      >
         <template #default>
           <OptionComponent
             :label="(label as ToolTipLabel).displayValue"
diff --git a/report-viewer/src/model/Match.ts b/report-viewer/src/model/Match.ts
index e03451371..08322c177 100644
--- a/report-viewer/src/model/Match.ts
+++ b/report-viewer/src/model/Match.ts
@@ -12,14 +12,16 @@
 export interface Match {
   firstFile: string
   secondFile: string
-  startInFirst: number
-  startColumnInFirst: number
-  endInFirst: number
-  endColumnInFirst: number
-  startInSecond: number
-  startColumnInSecond: number
-  endInSecond: number
-  endColumnInSecond: number
+  startInFirst: CodePosition
+  endInFirst: CodePosition
+  startInSecond: CodePosition
+  endInSecond: CodePosition
   tokens: number
   colorIndex?: number
 }
+
+export interface CodePosition {
+  line: number
+  column: number
+  tokenListIndex: number
+}
diff --git a/report-viewer/src/model/MatchInSingleFile.ts b/report-viewer/src/model/MatchInSingleFile.ts
index e959d47e0..1c62b1cd5 100644
--- a/report-viewer/src/model/MatchInSingleFile.ts
+++ b/report-viewer/src/model/MatchInSingleFile.ts
@@ -24,9 +24,9 @@ export class MatchInSingleFile {
    */
   get start(): number {
     if (this._index === 1) {
-      return this._match.startInFirst
+      return this._match.startInFirst.line
     } else {
-      return this._match.startInSecond
+      return this._match.startInSecond.line
     }
   }
 
@@ -35,25 +35,25 @@ export class MatchInSingleFile {
    */
   get end(): number {
     if (this._index === 1) {
-      return this._match.endInFirst
+      return this._match.endInFirst.line
     } else {
-      return this._match.endInSecond
+      return this._match.endInSecond.line
     }
   }
 
   get startColumn(): number {
     if (this._index === 1) {
-      return this._match.startColumnInFirst
+      return this._match.startInFirst.column
     } else {
-      return this._match.startColumnInSecond
+      return this._match.startInSecond.column
     }
   }
 
   get endColumn(): number {
     if (this._index === 1) {
-      return this._match.endColumnInFirst
+      return this._match.endInFirst.column
     } else {
-      return this._match.endColumnInSecond
+      return this._match.endInSecond.column
     }
   }
 }
diff --git a/report-viewer/src/model/factories/ComparisonFactory.ts b/report-viewer/src/model/factories/ComparisonFactory.ts
index 98097f605..f66df2797 100644
--- a/report-viewer/src/model/factories/ComparisonFactory.ts
+++ b/report-viewer/src/model/factories/ComparisonFactory.ts
@@ -122,14 +122,26 @@ export class ComparisonFactory extends BaseFactory {
     return {
       firstFile: slash(match.file1 as string),
       secondFile: slash(match.file2 as string),
-      startInFirst: match.start1 as number,
-      startColumnInFirst: ((match['start1_col'] as number) || 1) - 1,
-      endInFirst: match.end1 as number,
-      endColumnInFirst: ((match['end1_col'] as number) || Infinity) - 1,
-      startInSecond: match.start2 as number,
-      startColumnInSecond: ((match['start2_col'] as number) || 1) - 1,
-      endInSecond: match.end2 as number,
-      endColumnInSecond: ((match['end2_col'] as number) || Infinity) - 1,
+      startInFirst: {
+        line: match.start1 as number,
+        column: ((match['start1_col'] as number) || 1) - 1,
+        tokenListIndex: (match.startToken1 as number) ?? NaN
+      },
+      endInFirst: {
+        line: match.end1 as number,
+        column: ((match['end1_col'] as number) || Infinity) - 1,
+        tokenListIndex: (match.endToken1 as number) ?? NaN
+      },
+      startInSecond: {
+        line: match.start2 as number,
+        column: ((match['start2_col'] as number) || 1) - 1,
+        tokenListIndex: (match.startToken2 as number) ?? NaN
+      },
+      endInSecond: {
+        line: match.end2 as number,
+        column: ((match['end2_col'] as number) || Infinity) - 1,
+        tokenListIndex: (match.endToken2 as number) ?? NaN
+      },
       tokens: match.tokens as number
     }
   }
@@ -138,10 +150,10 @@ export class ComparisonFactory extends BaseFactory {
     const maxColorCount = getMatchColorCount()
     let currentColorIndex = 0
     const matchesFirst = Array.from(matches)
-      .sort((a, b) => a.startInFirst - b.startInFirst)
+      .sort((a, b) => a.startInFirst.line - b.startInFirst.line)
       .sort((a, b) => (a.firstFile > b.firstFile ? 1 : -1))
     const matchesSecond = Array.from(matches)
-      .sort((a, b) => a.startInSecond - b.startInSecond)
+      .sort((a, b) => a.startInSecond.line - b.startInSecond.line)
       .sort((a, b) => (a.secondFile > b.secondFile ? 1 : -1))
     const sortedSize = Array.from(matches).sort((a, b) => b.tokens - a.tokens)
 
diff --git a/report-viewer/src/views/ComparisonView.vue b/report-viewer/src/views/ComparisonView.vue
index b901b8d4a..8b3a9f9f4 100644
--- a/report-viewer/src/views/ComparisonView.vue
+++ b/report-viewer/src/views/ComparisonView.vue
@@ -148,7 +148,7 @@ const panel2: Ref<typeof FilesContainer | null> = ref(null)
  * @param line (line number)
  */
 function showMatchInFirst(match: Match) {
-  panel1.value?.scrollTo(match.firstFile, match.startInFirst)
+  panel1.value?.scrollTo(match.firstFile, match.startInFirst.line)
 }
 
 /**
@@ -157,7 +157,7 @@ function showMatchInFirst(match: Match) {
  * @param line (line number)
  */
 function showMatchInSecond(match: Match) {
-  panel2.value?.scrollTo(match.secondFile, match.startInSecond)
+  panel2.value?.scrollTo(match.secondFile, match.startInSecond.line)
 }
 
 /**
diff --git a/report-viewer/tailwind.config.js b/report-viewer/tailwind.config.js
index b32cc4100..94b94d875 100644
--- a/report-viewer/tailwind.config.js
+++ b/report-viewer/tailwind.config.js
@@ -53,7 +53,8 @@ export default {
           DEFAULT: '#0070f3',
           dark: '#00c'
         },
-        error: '#dc322f'
+        error: '#dc322f',
+        tooltip: 'rgba(0,0,0,0.8)'
       },
       borderWidth: {
         1: '1px'
diff --git a/report-viewer/tests/e2e/Distribution.spec.ts b/report-viewer/tests/e2e/Distribution.spec.ts
index 17a7b5b4e..2c67614aa 100644
--- a/report-viewer/tests/e2e/Distribution.spec.ts
+++ b/report-viewer/tests/e2e/Distribution.spec.ts
@@ -26,7 +26,7 @@ test('Test distribution diagram', async ({ page }) => {
 async function selectOptions(page: Page, options: string[]) {
   const distributionDiagramContainer = page.getByText('Distribution of Comparisons:Options:')
   for (const option of options) {
-    await distributionDiagramContainer.getByText(option).first().click()
+    await distributionDiagramContainer.getByText(option, { exact: true }).click()
   }
   // This timeout is so that the screenshot is taken after the animation is finished
   await page.waitForTimeout(3000)
@@ -34,7 +34,7 @@ async function selectOptions(page: Page, options: string[]) {
 
 function getTestCombinations() {
   const options = [
-    ['Average', 'Maximum'],
+    ['Average Similarity', 'Maximum Similarity'],
     ['Linear', 'Logarithmic']
   ]
 
