From d5891616e282e76011efa1a480c736590c3ef20c Mon Sep 17 00:00:00 2001
From: Marius <marius.johansen@udir.no>
Date: Tue, 24 Sep 2024 15:56:00 +0200
Subject: [PATCH 1/3] DIT-246: Hints.

Fixed overflow issue for lists
FIxed positioning issue for hint boxes
Changed design slightly to better differentiate from background
Made hints responsively follow position of explained word
Fixed issue with hint buttontext overlapping hint text
---
 src/vue/design/override-mobile.scss   |  2 --
 src/vue/design/re-styles/tooltip.scss | 20 +++++++++++++-------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/src/vue/design/override-mobile.scss b/src/vue/design/override-mobile.scss
index a8177db6..5046b1ea 100644
--- a/src/vue/design/override-mobile.scss
+++ b/src/vue/design/override-mobile.scss
@@ -21,8 +21,6 @@
   // Fixes issue with horizontal scrolling on mobile devices.
   #my-courses-container,
   .header,
-  ul,
-  li,
   .page-footer--content,
   .nav-bar__link-list-container {
     overflow-x: hidden !important;
diff --git a/src/vue/design/re-styles/tooltip.scss b/src/vue/design/re-styles/tooltip.scss
index e40ba059..f30b2f78 100644
--- a/src/vue/design/re-styles/tooltip.scss
+++ b/src/vue/design/re-styles/tooltip.scss
@@ -1,7 +1,7 @@
 .tooltip {
     position: relative;
-    display: inline-block;
     align-content: center;
+    z-index: unset;
 }
 
 
@@ -16,23 +16,29 @@
 }
 
 .tooltiptext-box {
+    display: none;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: max-content;
+    min-width:fit-content;
+    max-width: 10rem;
+    border: 1px solid lightgrey;
     border-radius: 4px;
-    background: #ECEFF2;
+    background: white;
     color: black;
     border-radius: 6px;
-    display: none;
     padding: 1rem;
     margin: 0.5rem 0 0.5rem 0;
     gap: 1rem;
-    position: absolute;
     z-index: 1;
-    width: 100%;
-    min-width: 40rem;
 
     .close-tooltip {
         cursor: pointer;
         float: right;
-        background: #ECEFF2;
     }
 
+    img {
+        max-width: unset;
+    }
 }

From 7b73d61db54c5862c800733f6e5480801f756e1e Mon Sep 17 00:00:00 2001
From: Marius <marius.johansen@udir.no>
Date: Tue, 24 Sep 2024 16:49:52 +0200
Subject: [PATCH 2/3] DIT-246: Hints.

- Added shadow
---
 src/vue/design/re-styles/tooltip.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vue/design/re-styles/tooltip.scss b/src/vue/design/re-styles/tooltip.scss
index f30b2f78..6a7388d9 100644
--- a/src/vue/design/re-styles/tooltip.scss
+++ b/src/vue/design/re-styles/tooltip.scss
@@ -32,6 +32,7 @@
     margin: 0.5rem 0 0.5rem 0;
     gap: 1rem;
     z-index: 1;
+    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
 
     .close-tooltip {
         cursor: pointer;

From 65d09bd8991e95aa9b74791fdffa71be5699e0c7 Mon Sep 17 00:00:00 2001
From: Marius <marius.johansen@udir.no>
Date: Thu, 31 Oct 2024 13:21:03 +0100
Subject: [PATCH 3/3] DIT-246: Hints

---
 src/vue/design/re-styles/tooltip.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vue/design/re-styles/tooltip.scss b/src/vue/design/re-styles/tooltip.scss
index 6a7388d9..e5b3482a 100644
--- a/src/vue/design/re-styles/tooltip.scss
+++ b/src/vue/design/re-styles/tooltip.scss
@@ -2,6 +2,7 @@
     position: relative;
     align-content: center;
     z-index: unset;
+    display: flex;
 }