thumbnails: replace browser tooltips with qtip2 tooltips (#3664).

app/assets/javascripts/application.js

@@ -6,6 +6,7 @@
 //= require jquery.storageapi.js
 //= require jquery.dropdown.min.js
 //= require jquery.hammer.js
+//= require jquery.qtip.js
 //= require ugoira_player.js
 //= require stupidtable.js
 //= require rails.js

app/assets/javascripts/post_tooltips.js.erb

@@ -0,0 +1,51 @@
+Danbooru.PostTooltip = {};
+
+Danbooru.PostTooltip.render_tooltip = function (event, qtip) {
+  var post_id = $(event.target).parents("[data-id]").data("id");
+
+  return $.get("/posts/" + post_id, { variant: "tooltip" }).done(function () {
+    qtip.elements.tooltip.removeClass("post-tooltip-loading");
+  });
+};
+
+// http://qtip2.com/options
+Danbooru.PostTooltip.QTIP_OPTIONS = {
+  style: "qtip-light post-tooltip",
+  content: Danbooru.PostTooltip.render_tooltip,
+  overwrite: false,
+  position: {
+    my: "top left",
+    at: "bottom left",
+    target: "mouse",
+    viewport: $(window),
+    adjust: {
+      mouse: false,
+      y: 25,
+      method: "shift",
+    },
+  },
+  show: {
+    solo: true,
+    delay: 300,
+    effect: false,
+    ready: true,
+    event: "mouseenter",
+  },
+  hide: {
+    delay: 50,
+    fixed: true,
+    effect: false,
+    event: "mouseleave",
+  },
+  events: {
+    show: function (event, qtip) { qtip.elements.tooltip.addClass("post-tooltip-loading"); },
+  },
+};
+
+Danbooru.PostTooltip.initialize = function () {
+  $(document).on("mouseenter", ".post-preview img", function (event) {
+    $(this).qtip(Danbooru.PostTooltip.QTIP_OPTIONS, event);
+  });
+};
+
+$(document).ready(Danbooru.PostTooltip.initialize);

app/assets/javascripts/posts.js

@@ -4,8 +4,6 @@
   Danbooru.Post.pending_update_count = 0;
 
   Danbooru.Post.initialize_all = function() {
-    this.initialize_post_previews();
-
     if ($("#c-posts").length) {
       this.initialize_shortcuts();
       this.initialize_saved_searches();
@@ -321,28 +319,6 @@
     });
   }
 
-  Danbooru.Post.initialize_post_previews = function() {
-    $(".post-preview").each(function(i, v) {
-      Danbooru.Post.initialize_title_for(v);
-    });
-  }
-
-  Danbooru.Post.initialize_title_for = function(post) {
-    var $post = $(post);
-    var $img = $post.find("img");
-    var score = null;
-    if ($post.data("views")) {
-      score = " views:" + $post.data("views");
-    } else {
-      score = " score:" + $post.data("score");
-    }
-    var uploader = " ";
-    if ($post.attr("data-uploader")) {
-      uploader += "user:" + $post.attr("data-uploader").replace(/_/g, " ");
-    }
-    $img.attr("title", $post.attr("data-tags") + uploader + " rating:" + $post.data("rating") + score);
-  }
-
   Danbooru.Post.expand_image = function(e) {
     if (Danbooru.test_max_width(660)) {
       // just do the default behavior
@@ -519,7 +495,6 @@
     if (data.has_visible_children) {
       $post.addClass("post-status-has-children");
     }
-    Danbooru.Post.initialize_title_for($post);
   }
 
   Danbooru.Post.vote = function(score, id) {