Fix overflow of tooltip release-status.

Website/interaction.js

@@ -198,27 +198,27 @@ function CreateManga(manga, connector){
 
     //Create the publication status indicator
     var releaseStatus = document.createElement('publication-status');
-    var statusTooltip = document.createElement('status-tooltip');
+    releaseStatus.setAttribute("release-status", manga.releaseStatus);
-    if (manga.releaseStatus == 0) {
+    switch(manga.releaseStatus){
-      releaseStatus.style.backgroundColor = 'limegreen';
+      case 0:
-      statusTooltip.innerText = "Ongoing"
+        releaseStatus.setAttribute("release-status", "Ongoing");
-    }else if(manga.releaseStatus == 1){
+        break;
-      releaseStatus.style.backgroundColor = 'blueviolet';
+      case 1:
-      statusTooltip.innerText = "Completed"
+        releaseStatus.setAttribute("release-status", "Completed");
-    } else if (manga.releaseStatus == 2) {
+        break;
-      releaseStatus.style.backgroundColor = 'darkorange';
+      case 2:
-      statusTooltip.innerText = "On Hiatus"
+        releaseStatus.setAttribute("release-status", "On Hiatus");
-    } else if (manga.releaseStatus == 3) {
+        break;
-      releaseStatus.style.backgroundColor = 'firebrick';
+      case 3:
-      statusTooltip.innerText = "Cancelled"
+        releaseStatus.setAttribute("release-status", "Cancelled");
-    } else if (manga.releaseStatus == 4) {
+        break;
-      releaseStatus.style.backgroundColor = 'aqua';
+      case 4:
-      statusTooltip.innerText = "Upcoming";
+        releaseStatus.setAttribute("release-status", "Upcoming");
-    } else {
+        break;
-      releaseStatus.style.backgroundColor = 'gray';
+      default:
-        statusTooltip.innerText = 'Status Unavailable';
+        releaseStatus.setAttribute("release-status", "Status Unavailable");
+        break;
     }
-    releaseStatus.appendChild(statusTooltip);         //Append the tooltip to the indicator circle
 
     info.appendChild(mangaName);
     mangaElement.appendChild(info);

Website/styles/style_default.css

@@ -265,45 +265,55 @@ publication-status {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
 }
 
-publication-status:hover > status-tooltip {
+publication-status::after {
-    visibility: visible;
+    content: attr(release-status);
-}
-
-status-tooltip {
-    visibility: hidden;
     position: absolute;
+    top: 0;
+    right: 0;
 
-    /*Position*/
+    visibility: hidden;
-    left: 150%;
-    bottom: -75%;
-    z-index: 3;
 
     /*Text Properties*/
     font-size:10pt;
     font-weight:bold;
     color:white;
     text-align: center;
-    padding: 5px 5px;
 
     /*Size*/
-    width:100px;
+    padding: 3px 8px;
-    background-color: black;
     border-radius: 6px;
-    border-style: solid;
+    border: 0px;
-    border-color: black;
+    background-color: inherit;
-    border-width: 1px;
 }
 
-status-tooltip::after {
+publication-status:hover::after{
-    content: " ";
+    visibility:visible;
-    position: absolute;
+}
-    top: 50%;
+
-    right: 100%; /* To the left of the tooltip */
+
-    margin-top: -5px;
+publication-status[release-status="Ongoing"]{
-    border-width: 5px;
+    background-color: limegreen;
-    border-style: solid;
+}
-    border-color: transparent black transparent transparent;
+
-  }
+publication-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+publication-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+publication-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+publication-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+publication-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
 
 publication img {
     position: absolute;

Website/styles/style_mangahover.css

@@ -266,45 +266,55 @@ publication-status {
     box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 10px, rgb(51, 51, 51) 0px 0px 10px 3px;
 }
 
-publication-status:hover > status-tooltip {
+publication-status::after {
-    visibility: visible;
+    content: attr(release-status);
-}
-
-status-tooltip {
-    visibility: hidden;
     position: absolute;
+    top: 0;
+    right: 0;
 
-    /*Position*/
+    visibility: hidden;
-    left: 150%;
-    bottom: -75%;
-    z-index: 3;
 
     /*Text Properties*/
     font-size:10pt;
     font-weight:bold;
     color:white;
     text-align: center;
-    padding: 5px 5px;
 
     /*Size*/
-    width:100px;
+    padding: 3px 8px;
-    background-color: black;
     border-radius: 6px;
-    border-style: solid;
+    border: 0px;
-    border-color: black;
+    background-color: inherit;
-    border-width: 1px;
 }
 
-status-tooltip::after {
+publication-status:hover::after{
-    content: " ";
+    visibility:visible;
-    position: absolute;
+}
-    top: 50%;
+
-    right: 100%; /* To the left of the tooltip */
+
-    margin-top: -5px;
+publication-status[release-status="Ongoing"]{
-    border-width: 5px;
+    background-color: limegreen;
-    border-style: solid;
+}
-    border-color: transparent black transparent transparent;
+
-  }
+publication-status[release-status="Completed"]{
+    background-color: blueviolet;
+}
+
+publication-status[release-status="On Hiatus"]{
+    background-color: darkorange;
+}
+
+publication-status[release-status="Cancelled"]{
+    background-color: firebrick;
+}
+
+publication-status[release-status="Upcoming"]{
+    background-color: aqua;
+}
+
+publication-status[release-status="Status Unavailable"]{
+    background-color: gray;
+}
 
 
 publication-details {