From 53bb83faca30b7401eecf9699752f5604c61d1c4 Mon Sep 17 00:00:00 2001
From: db-2001 <adityabhatnagar2001@gmail.com>
Date: Wed, 1 Nov 2023 19:47:21 -0400
Subject: [PATCH] Moved tooltip to right for better readability

---
 Website/styles/style_default.css    | 13 +++++++------
 Website/styles/style_mangahover.css | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/Website/styles/style_default.css b/Website/styles/style_default.css
index 4f4e67c..f4f6fa8 100644
--- a/Website/styles/style_default.css
+++ b/Website/styles/style_default.css
@@ -269,8 +269,8 @@ status-tooltip {
     position: absolute;
 
     /*Position*/
-    left: -50px ;
-    bottom: 150%;
+    left: 150% ;
+    bottom: -50%;
     z-index: 3;
     
     /*Text Properties*/
@@ -279,6 +279,7 @@ status-tooltip {
     color:white;
     text-align: center;
     padding: 5px 5px;
+    vertical-align: middle;
 
     /*Size*/
     width:100px;
@@ -289,12 +290,12 @@ status-tooltip {
 status-tooltip::after {
     content: " ";
     position: absolute;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-    margin-left: -5px;
+    top: 50%;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: black transparent transparent transparent;
+    border-color: transparent black transparent transparent;
   }
 
 publication img {
diff --git a/Website/styles/style_mangahover.css b/Website/styles/style_mangahover.css
index 2390c0d..d9afb52 100644
--- a/Website/styles/style_mangahover.css
+++ b/Website/styles/style_mangahover.css
@@ -270,8 +270,8 @@ status-tooltip {
     position: absolute;
 
     /*Position*/
-    left: -50px ;
-    bottom: 150%;
+    left: 150% ;
+    bottom: -50%;
     z-index: 3;
     
     /*Text Properties*/
@@ -280,6 +280,7 @@ status-tooltip {
     color:white;
     text-align: center;
     padding: 5px 5px;
+    vertical-align: middle;
 
     /*Size*/
     width:100px;
@@ -290,12 +291,12 @@ status-tooltip {
 status-tooltip::after {
     content: " ";
     position: absolute;
-    top: 100%; /* At the bottom of the tooltip */
-    left: 50%;
-    margin-left: -5px;
+    top: 50%;
+    right: 100%; /* To the left of the tooltip */
+    margin-top: -5px;
     border-width: 5px;
     border-style: solid;
-    border-color: black transparent transparent transparent;
+    border-color: transparent black transparent transparent;
   }