fixed tooltips for tag descriptions

Author: albogdano

src/main/resources/static/scripts/scoold.js

@@ -898,7 +898,7 @@ $(function () {
 	});
 
 	var tagDescriptions = {};
-	$(".tagchip").on("mousemove", function () {
+	$(".tagchip").on("mouseenter mouseover mousemove", function () {
 		var that = $(this);
 		var tag = that.text();
 		if (tag && $.trim(tag) !== "") {
@@ -909,16 +909,32 @@ $(function () {
 					data.map(function (t) {
 						if (t.description) {
 							tagDescriptions[t.tag] = t.description;
+							showTagTooltip(that, tagDescriptions[tag]);
+							that.attr("title", "");
 						}
 					});
 				});
 			}
-			if ($.trim(tagDescriptions[tag]) !== "" && that.attr("title") !== tagDescriptions[tag]) {
-				that.attr("title", tagDescriptions[tag]);
+			if ($.trim(tagDescriptions[tag]) !== "" && that.attr("data-tooltip") !== tagDescriptions[tag]) {
+				that.attr("title", "");
+				showTagTooltip(that, tagDescriptions[tag]);
 			}
 		}
 	});
 
+	function showTagTooltip(that, text) {
+		that.next("div.material-tooltip").css({
+			"opacity":"1",
+			"visibility":"visible",
+			"left": that.offset().left,
+			"top": that.offset().top + 40
+		}).find(".tooltip-content").text(text);
+	}
+
+	$(".tagchip").on("mouseleave", function () {
+		$(this).next("div.material-tooltip").css({"opacity": "0", "visibility": "hidden"});
+	});
+
 	/****************************************************
      *                  PAGINATION
      ****************************************************/

src/main/resources/templates/macro.vm

@@ -257,6 +257,7 @@
 			<span class="chip mrs">$!showtag</span>
 			#else
 			<a href="$link/tag/$!utils.urlEncode($showtag)" title="Posts tagged $!showtag" class="chip mrs tagchip">$!showtag</a>
+			<div class="material-tooltip"><div class="tooltip-content"></div></div>
 			#end
 		#end
 	#end