Add a tooltip showing the OP's post info in the catalog.

css/style.css

@@ -495,6 +495,16 @@ a[href="javascript:;"] {
   overflow: hidden;
   text-align: center;
 }
+.thread-info {
+  position: fixed;
+  background: inherit;
+  padding: 2px;
+  border-radius: 2px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+}
+.thread-info .post {
+  margin: 0;
+}
 
 /* Announcement Hiding */
 :root.hide-announcement #globalMessage,

src/General/Index.coffee

@@ -159,6 +159,8 @@ Index =
     @pin() if data.isPinned
   catalogNode: ->
     $.on @nodes.thumb, 'click', Index.onClick
+    return if Conf['Image Hover in Catalog']
+    $.on @nodes.thumb, 'mouseover', Index.onOver
   onClick: (e) ->
     return if e.button isnt 0
     thread = g.threads[@parentNode.dataset.fullID]
@@ -169,6 +171,28 @@ Index =
     else
       return
     e.preventDefault()
+  onOver: (e) ->
+    # 4chan's less than stellar CSS forces us to include a .post and .postInfo
+    # in order to have proper styling for the .nameBlock's content.
+    {nodes} = g.threads[@parentNode.dataset.fullID].OP
+    el = $.el 'div',
+      innerHTML: '<div class=post><div class=postInfo>'
+      className: 'thread-info'
+      hidden: true
+    $.add el.firstElementChild.firstElementChild, [
+      $('.nameBlock', nodes.info).cloneNode true
+      $.tn ' '
+      nodes.date.cloneNode true
+    ]
+    $.add d.body, el
+    UI.hover
+      root: @
+      el: el
+      latestEvent: e
+      endEvents: 'mouseout'
+      offsetX: 15
+      offsetY: -20
+    setTimeout (-> el.hidden = false if el.parentNode), .25 * $.SECOND
   toggleHide: (thread) ->
     $.rm thread.catalogView.nodes.root
     if Index.showHiddenThreads

src/General/UI.coffee

@@ -273,7 +273,7 @@ UI = do ->
       $.off d, 'mouseup',   @up
     $.set "#{@id}.position", @style.cssText
 
-  hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb}) ->
+  hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb, offsetX, offsetY}) ->
     o = {
       root
       el
@@ -283,14 +283,17 @@ UI = do ->
       latestEvent
       clientHeight: doc.clientHeight
       clientWidth:  doc.clientWidth
+      offsetX: offsetX or 45
+      offsetY: offsetY or -120
     }
     o.hover    = hover.bind    o
     o.hoverend = hoverend.bind o
 
-    $.asap ->
+    if asapTest
-      !el.parentNode or asapTest()
+      $.asap ->
-    , ->
+        !el.parentNode or asapTest()
-      o.hover o.latestEvent if el.parentNode
+      , ->
+        o.hover o.latestEvent if el.parentNode
 
     $.on root, endEvents,   o.hoverend
     $.on root, 'mousemove', o.hover
@@ -304,7 +307,7 @@ UI = do ->
     height = @el.offsetHeight
     {clientX, clientY} = e
 
-    top = clientY - 120
+    top = clientY + @offsetY
     top = if @clientHeight <= height or top <= 0
       0
     else if top + height >= @clientHeight
@@ -313,9 +316,9 @@ UI = do ->
       top
 
     [left, right] = if clientX <= @clientWidth / 2
-      [clientX + 45 + 'px', null]
+      [clientX + @offsetX + 'px', null]
     else
-      [null, @clientWidth - clientX + 45 + 'px']
+      [null, @clientWidth - clientX + @offsetX + 'px']
 
     {style} = @
     style.top   = top + 'px'