Make tooltips more visible

report-viewer/src/components/ComparisonTableFilter.vue

@@ -4,7 +4,11 @@
       class="flex flex-col flex-wrap gap-x-8 gap-y-2 overflow-hidden md:flex-row md:items-center"
     >
       <h2>{{ header }}</h2>
-      <ToolTipComponent direction="left" class="max-w-full grow md:min-w-[40%]">
+      <ToolTipComponent
+        direction="left"
+        class="max-w-full grow md:min-w-[40%]"
+        :show-info-symbol="false"
+      >
         <template #default>
           <SearchBarComponent v-model="searchStringValue" placeholder="Filter/Unhide Comparisons" />
         </template>

report-viewer/src/components/InfoIcon.vue

@@ -0,0 +1,12 @@
+<template>
+  <span
+    class="t-0 relative ml-0 hidden h-full items-center text-[0.6rem] text-slate-300 md:ml-1 md:flex dark:text-slate-600"
+  >
+    <FontAwesomeIcon :icon="faInfoCircle" />
+  </span>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'
+</script>

report-viewer/src/components/SearchBarComponent.vue

@@ -14,6 +14,7 @@
       class="flex-auto border-0 bg-transparent outline-hidden placeholder:text-gray-500"
       :placeholder="placeholder"
     />
+    <InfoIcon class="ml-0!" />
   </Interactable>
 </template>
 
@@ -23,6 +24,7 @@ import Interactable from './InteractableComponent.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons'
+import InfoIcon from './InfoIcon.vue'
 
 library.add(faMagnifyingGlass)
 

report-viewer/src/components/TabbedContainer.vue

@@ -15,9 +15,13 @@
         <ToolTipComponent
           v-if="toolTips[index]"
           :direction="index < firstBottomTooltipIndex ? 'right' : 'bottom'"
+          :show-info-symbol="false"
         >
           <template #default>
-            <p class="p-2 px-5">{{ tabNames[index] }}</p>
+            <span class="flex items-center p-2 px-5">
+              <p>{{ tabNames[index] }}</p>
+              <InfoIcon />
+            </span>
           </template>
           <template #tooltip>
             <p class="text-sm whitespace-pre">{{ toolTips[index] }}</p>
@@ -40,6 +44,7 @@ import { computed, ref, type Ref } from 'vue'
 import ContainerComponent from './ContainerComponent.vue'
 import type { ToolTipLabel } from '@/model/ui/ToolTip'
 import ToolTipComponent from './ToolTipComponent.vue'
+import InfoIcon from './InfoIcon.vue'
 
 const props = defineProps({
   tabs: {

report-viewer/src/components/ToolTipComponent.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="group pointer-events-none inline">
-    <div ref="contentRef" class="pointer-events-auto"><slot></slot></div>
+    <div ref="contentRef" class="pointer-events-auto flex items-center gap-x-1">
+      <slot></slot>
+      <InfoIcon v-if="showInfoSymbol && $slots.tooltip" class="ml-0!" />
+    </div>
     <span
       v-if="$slots.tooltip"
       ref="tooltipRef"
@@ -27,6 +30,7 @@
 <script setup lang="ts">
 import type { ToolTipDirection } from '@/model/ui/ToolTip'
 import { computed, ref, type PropType, type Ref, type StyleValue } from 'vue'
+import InfoIcon from './InfoIcon.vue'
 
 const props = defineProps({
   direction: {
@@ -40,6 +44,11 @@ const props = defineProps({
     required: false,
     default: false
   },
+  showInfoSymbol: {
+    type: Boolean,
+    required: false,
+    default: true
+  },
   /** Can be set if the tooltip is inside a scrollable container */
   scrollOffsetX: {
     type: Number,

report-viewer/src/components/fileDisplaying/MatchList.vue

@@ -5,18 +5,22 @@
   <div
     class="flex h-fit max-w-full min-w-0 flex-row flex-wrap space-x-1 gap-y-1 overflow-x-hidden text-xs md:flex-nowrap print:hidden"
   >
-    <ToolTipComponent direction="right">
+    <ToolTipComponent direction="right" :show-info-symbol="false">
       <template #default>
-        <OptionComponent label="Matches:" />
+        <OptionComponent label="Matches:" :has-tool-tip="true" />
       </template>
       <template #tooltip>
         <p class="text-sm whitespace-pre">Click on a match to show it in the code view.</p>
       </template>
     </ToolTipComponent>
 
-    <ToolTipComponent v-if="hasBaseCode" direction="right" class="pr-3">
+    <ToolTipComponent v-if="hasBaseCode" direction="right" class="pr-3" :show-info-symbol="false">
       <template #default>
-        <OptionComponent label="Base Code" :style="{ background: getMatchColor(0.3, 'base') }" />
+        <OptionComponent
+          label="Base Code"
+          :style="{ background: getMatchColor(0.3, 'base') }"
+          :has-tool-tip="true"
+        />
       </template>
       <template #tooltip>
         <div class="text-sm whitespace-pre">
@@ -54,6 +58,7 @@
         :key="index"
         :direction="getTooltipDirection(index)"
         :scroll-offset-x="scrollOffsetX"
+        :show-info-symbol="false"
       >
         <template #default>
           <OptionComponent
@@ -65,6 +70,7 @@
               ': ' +
               match.tokens
             "
+            :has-tool-tip="true"
             @click="$emit('matchSelected', match)"
           />
         </template>

report-viewer/src/components/optionsSelectors/OptionComponent.vue

@@ -5,10 +5,12 @@
     @click="$emit('click')"
   >
     {{ label }}
+    <InfoIcon v-if="hasToolTip" class="text-[0.5rem]" />
   </Interactable>
 </template>
 
 <script setup lang="ts">
+import InfoIcon from '../InfoIcon.vue'
 import Interactable from '../InteractableComponent.vue'
 
 defineProps({
@@ -20,6 +22,11 @@ defineProps({
     type: Boolean,
     required: false,
     default: false
+  },
+  hasToolTip: {
+    type: Boolean,
+    required: false,
+    default: false
   }
 })
 

report-viewer/src/components/optionsSelectors/OptionsSelectorComponent.vue

@@ -13,11 +13,13 @@
         v-if="(label as ToolTipLabel).displayValue !== undefined"
         direction="right"
         :tool-tip-container-will-be-centered="true"
+        :show-info-symbol="false"
       >
         <template #default>
           <OptionComponent
             :label="(label as ToolTipLabel).displayValue"
             :selected="index == getSelected()"
+            :has-tool-tip="true"
             @click="select(index)"
           />
         </template>

report-viewer/src/views/ComparisonView.vue

@@ -11,7 +11,11 @@
         {{ store().getDisplayName(comparison.firstSubmissionId) }}
         -
         {{ store().getDisplayName(comparison.secondSubmissionId) }}
-        <ToolTipComponent direction="left" class="float-right hidden md:block print:hidden">
+        <ToolTipComponent
+          direction="left"
+          class="float-right hidden md:block print:hidden"
+          :show-info-symbol="false"
+        >
           <template #tooltip>
             <p class="text-sm whitespace-pre">
               Printing works best in landscape mode on Chromium based browsers

report-viewer/src/views/OverviewView.vue

@@ -60,9 +60,11 @@
           </template>
         </TextInformation>
 
-        <ToolTipComponent direction="left" class="grow-0 print:hidden">
+        <ToolTipComponent direction="left" class="grow-0 print:hidden" :show-info-symbol="false">
           <template #default>
-            <Button @click="router.push({ name: 'InfoView' })"> More </Button>
+            <Button @click="router.push({ name: 'InfoView' })"
+              ><span class="flex items-center">More <InfoIcon /></span
+            ></Button>
           </template>
           <template #tooltip>
             <p class="text-sm whitespace-pre">More information about the CLI run of JPlag</p>
@@ -106,6 +108,7 @@ import Button from '@/components/ButtonComponent.vue'
 import TextInformation from '@/components/TextInformation.vue'
 import ToolTipComponent from '@/components/ToolTipComponent.vue'
 import { Overview } from '@/model/Overview'
+import InfoIcon from '@/components/InfoIcon.vue'
 
 const props = defineProps({
   overview: {