Fix #4931: Add popup voter list for comments.

Show the comment's upvote and downvote count when you hover over a
comment's score. For mods, show the list of voters as well.

app/components/comment_votes_tooltip_component/comment_votes_tooltip_component.html.erb

@@ -0,0 +1,15 @@
+<div class="comment-votes-tooltip thin-scrollbar text-xs">
+  <div class="text-center text-muted whitespace-nowrap">
+    +<%= upvote_count %> / -<%= downvote_count %> <%= upvote_ratio %>
+  </div>
+
+  <% if policy(CommentVote).can_see_votes? %>
+    <div class="comment-voters">
+      <% votes.each do |vote| %>
+        <div class="comment-voter truncate">
+          <%= vote_icon(vote) %> <%= link_to_user(vote.user, classes: "align-middle") %>
+        </div>
+      <% end %>
+    </div>
+  <% end %>
+</div>

app/components/comment_votes_tooltip_component/comment_votes_tooltip_component.js

@@ -0,0 +1,65 @@
+import Utility from "../../javascript/src/javascripts/utility.js";
+import { delegate, hideAll } from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
+class CommentVotesTooltipComponent {
+  // Trigger on the comment score link; see CommentComponent.
+  static TARGET_SELECTOR = "span.comment-score";
+  static SHOW_DELAY = 125;
+  static HIDE_DELAY = 125;
+  static DURATION = 250;
+  static instance = null;
+
+  static initialize() {
+    if ($(CommentVotesTooltipComponent.TARGET_SELECTOR).length === 0) {
+      return;
+    }
+
+    CommentVotesTooltipComponent.instance = delegate("body", {
+      allowHTML: true,
+      appendTo: document.querySelector("#comment-votes-tooltips"),
+      delay: [CommentVotesTooltipComponent.SHOW_DELAY, CommentVotesTooltipComponent.HIDE_DELAY],
+      duration: CommentVotesTooltipComponent.DURATION,
+      interactive: true,
+      maxWidth: "none",
+      target: CommentVotesTooltipComponent.TARGET_SELECTOR,
+      theme: "common-tooltip",
+      touch: false,
+
+      onShow: CommentVotesTooltipComponent.onShow,
+      onHide: CommentVotesTooltipComponent.onHide,
+    });
+  }
+
+  static async onShow(instance) {
+    let $target = $(instance.reference);
+    let $tooltip = $(instance.popper);
+    let commentId = $target.parents("[data-id]").data("id");
+
+    hideAll({ exclude: instance });
+
+    try {
+      $tooltip.addClass("tooltip-loading");
+
+      instance._request = $.get(`/comments/${commentId}/votes`, { variant: "tooltip" });
+      let html = await instance._request;
+      instance.setContent(html);
+
+      $tooltip.removeClass("tooltip-loading");
+    } catch (error) {
+      if (error.status !== 0 && error.statusText !== "abort") {
+        Utility.error(`Error displaying votes for comment #${commentId} (error: ${error.status} ${error.statusText})`);
+      }
+    }
+  }
+
+  static async onHide(instance) {
+    if (instance._request?.state() === "pending") {
+      instance._request.abort();
+    }
+  }
+}
+
+$(document).ready(CommentVotesTooltipComponent.initialize);
+
+export default CommentVotesTooltipComponent;

app/components/comment_votes_tooltip_component/comment_votes_tooltip_component.scss

@@ -0,0 +1,15 @@
+.comment-votes-tooltip {
+  max-height: 240px;
+
+  .upvote-icon {
+    color: var(--post-upvote-color);
+  }
+
+  .downvote-icon {
+    color: var(--post-downvote-color);
+  }
+
+  .comment-voter {
+    max-width: 160px;
+  }
+}