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 {