1 files changed, 31 insertions, 4 deletions

diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js
index 476561b..906b350 100644
--- a/Extensions/UserScript/Return Youtube Dislike.user.js
+++ b/Extensions/UserScript/Return Youtube Dislike.user.js
@@ -33,6 +33,7 @@ const extConfig = {
   colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan)
   numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered)
   numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers)
+  tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip.
   numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)
 // END USER OPTIONS
 };
@@ -262,6 +263,32 @@ function createRateBar(likes, dislikes) {
   const widthPercent =
     likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
+  var likePercentage = parseFloat(widthPercent.toFixed(1));
+  const dislikePercentage = (100 - likePercentage).toLocaleString();
+  likePercentage = likePercentage.toLocaleString();
+
+  var tooltipInnerHTML;
+  switch (extConfig.tooltipPercentageMode) {
+    case "dash_like":
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${likePercentage}%`
+    break;
+    case "dash_dislike":
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${dislikePercentage}%`
+    break;
+    case "both":
+      tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`
+      break;
+    case "only_like":
+      tooltipInnerHTML = `${likePercentage}%`
+      break;
+    case "only_dislike":
+      tooltipInnerHTML = `${dislikePercentage}%`
+      break;
+    default:
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`
+  }
+
+
   if (!rateBar && !isMobile) {
     let colorLikeStyle = "";
     let colorDislikeStyle = "";
@@ -269,7 +296,7 @@ function createRateBar(likes, dislikes) {
       colorLikeStyle = "; background-color: " + getColorFromTheme(true);
       colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
     }
-    
+
     document.getElementById("menu-container").insertAdjacentHTML(
       "beforeend",
       `
@@ -286,7 +313,7 @@ function createRateBar(likes, dislikes) {
            </div>
         </div>
         <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
-           <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
+           <!--css-build:shady-->${tooltipInnerHTML}
         </tp-yt-paper-tooltip>
         </div>
 `
@@ -300,8 +327,8 @@ function createRateBar(likes, dislikes) {
 
     document.querySelector(
       "#ryd-dislike-tooltip > #tooltip"
-    ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-    
+    ).innerHTML = tooltipInnerHTML;
+
     if (extConfig.coloredBar) {
       document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
         getColorFromTheme(false);