Justerer på hover

abakus-ntnu · Feb 7, 2024 · 900960f · 900960f
1 parent 3dcbfa4
commit 900960f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/assets/css/revy.css b/assets/css/revy.css
@@ -23,16 +23,32 @@
     color: #fff !important;
 }
 
+
 .btn-main-red {
     color: #fff;
     background-color: #CC2127;
     border-color: #CC2127;
   }
+
+  .btn-main-red .tooltiptext {
+    visibility: hidden;
+    width: 120px;
+    background-color: black;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+
+    /* Position the tooltip */
+    position: absolute;
+    z-index: 1;
+  }
 
-  .btn-main-red:hover {
+  .btn-main-red:hover .btn-hover-text {
     color: #fff;
     background-color: #B81E23;
     border-color: #B81E23;
+    visibility: visible;
   }
 
   .btn-main-red:focus, .btn-main-red.focus {

diff --git a/index.html b/index.html
@@ -65,7 +65,7 @@
                 <img src="assets/imgs/revy_logoer/best_foer_logo.png" style="max-width: 35%; margin-bottom: 2%; margin-top: -2%;">
 
                 <div class="buttons text-center">
-                    <a href="http://www.byscenen.no/event/abakusrevyen-24-1" class="btn btn-main-red rounded w-lg btn-lg my-1"><div class="tooltip"> Billetter <span class="tooltiptext">Ikke tilgjengelig</span></div><br> Torsdag 19:00</a>
+                    <a href="http://www.byscenen.no/event/abakusrevyen-24-1" class="btn btn-main-red rounded w-lg btn-lg my-1">Billetter <span class="tooltiptext">Ikke tilgjengelig</span><br> Torsdag 19:00</a>
                     <a href="http://www.byscenen.no/event/abakusrevyen-24-2" class="btn btn-main-red rounded w-lg btn-lg my-1">Billetter <br> Fredag 17:00</a>
                     <a href="http://www.byscenen.no/event/abakusrevyen-24-3" class="btn btn-main-red rounded w-lg btn-lg my-1">Billetter <br> Fredag 20:30</a>
                     <a href="https://abakusrevyen.no/" class="btn btn-main-red rounded w-lg btn-lg my-1">Livestream <br> <i>Kommer</i></a>