Fix #4186: Add tooltips to post #xxx links.

app/javascript/src/javascripts/post_tooltips.js

@@ -7,10 +7,18 @@ require('qtip2/dist/jquery.qtip.css');
 let PostTooltip = {};
 
 PostTooltip.render_tooltip = async function (event, qtip) {
-  var post_id = $(this).parents("[data-id]").data("id");
+  let post_id = null;
+  let preview = false;
+
+  if ($(this).is(".dtext-post-id-link")) {
+    preview = true;
+    post_id = /\/posts\/(\d+)/.exec($(this).attr("href"))[1];
+  } else {
+    post_id = $(this).parents("[data-id]").data("id");
+  }
 
   try {
-    qtip.cache.request = $.get(`/posts/${post_id}?variant=tooltip`);
+    qtip.cache.request = $.get(`/posts/${post_id}`, { variant: "tooltip", preview: preview });
     let html = await qtip.cache.request;
 
     qtip.set("content.text", html);
@@ -30,7 +38,7 @@ PostTooltip.on_show = function (event, qtip) {
   }
 };
 
-PostTooltip.POST_SELECTOR = "*:not(.ui-sortable-handle) > .post-preview img";
+PostTooltip.POST_SELECTOR = "*:not(.ui-sortable-handle) > .post-preview img, .dtext-post-id-link";
 
 // http://qtip2.com/options
 PostTooltip.QTIP_OPTIONS = {

app/javascript/src/styles/specific/post_tooltips.scss

@@ -59,17 +59,30 @@ $tooltip-width: 164px * 3 - 10; // 3 thumbnails wide.
     padding: 0;
 
     > * {
-      padding: 2px 6px;
+      padding: 4px 8px;
     }
 
     .post-tooltip-body {
       @include thin-scrollbar;
       max-height: $tooltip-body-height;
       overflow-y: auto;
+      display: flex;
+
+      &.has-preview {
+        max-height: 154px;
+        padding: 8px;
+
+        article.post-preview {
+          margin: 0 8px 0 0;
+        }
+      }
 
       li {
         margin-right: 0;
       }
+
+      .post-tooltip-body-left  { flex: 0; }
+      .post-tooltip-body-right { flex: 1; }
     }
 
     .post-tooltip-header {

app/views/posts/show.html+tooltip.erb

@@ -35,14 +35,22 @@
   </span>
 </div>
 
-<div class="post-tooltip-body">
-  <div class="post-tooltip-pools">
-    <% @post.pools.series.undeleted.each do |pool| %>
-      <%= link_to pool, class: "pool-category-#{pool.category}" do %>
-        <%= "pool:#{pool.pretty_name} [#{pool.page_number(@post.id)}/#{pool.post_count}]" %>
-      <% end %>
+<div class="post-tooltip-body <%= "has-preview" if params[:preview].truthy? %>">
+  <div class="post-tooltip-body-left">
+    <% if params[:preview].truthy? %>
+      <%= PostPresenter.preview(@post, show_deleted: true) %>
     <% end %>
   </div>
 
-  <%= @post.presenter.inline_tag_list_html(humanize_tags: false) %>
+  <div class="post-tooltip-body-right">
+    <div class="post-tooltip-pools">
+      <% @post.pools.series.undeleted.each do |pool| %>
+        <%= link_to pool, class: "pool-category-#{pool.category}" do %>
+          <%= "pool:#{pool.pretty_name} [#{pool.page_number(@post.id)}/#{pool.post_count}]" %>
+        <% end %>
+      <% end %>
+    </div>
+
+    <%= @post.presenter.inline_tag_list_html(humanize_tags: false) %>
+  </div>
 </div>