Fix tootip overlay closing.

BrainPortal/app/helpers/rich_ui_helper.rb

@@ -215,7 +215,8 @@ def html_tool_tip(text = "<span class=\"action_link\">?</span>".html_safe, optio
        @content_sig_cache[content_signature] = html_tool_tip_id
        content_div = "<div id=\"html_tool_tip_#{html_tool_tip_id}\" class=\"#{content_class}\">" +
                      h(content) +
-                    "</div>"
+                     "<a class=\"close_html_tool_tip\" id=\"close_html_tool_tip_#{html_tool_tip_id}\" data-tool-tip-id=\"html_tool_tip_#{html_tool_tip_id}\" href=\"#\">Close</a>" +
+                     "</div>"
     end
 
     # Create tooltip trigger

BrainPortal/public/javascripts/cbrain.js

@@ -744,7 +744,7 @@
 
     //html_tool_tip_code based on xstooltip provided by
     //http://www.texsoft.it/index.php?%20m=sw.js.htmltooltip&c=software&l=it
-    $(document).delegate(".html_tool_tip_trigger", "mouseenter", function(event) {
+    $(document).on("mouseenter click", ".html_tool_tip_trigger", function(event) {
       var trigger = $(this);
       var tool_tip_id = trigger.data("tool-tip-id");
       var tool_tip = $("#" + tool_tip_id);
@@ -763,13 +763,28 @@
       tool_tip.css('top',  y + 'px');
       tool_tip.css('left', x + 'px');
 
-      tool_tip.show();
-    }).delegate(".html_tool_tip_trigger", "mouseleave", function(event) {
+      // If click event, show the tooltip even if other tooltips are visible
+      if (event.type === "click") {
+        tool_tip.show();
+        event.preventDefault();
+      }
+      // If mouseenter event, show the tooltip only if no other tooltips are visible
+      if (event.type === "mouseenter") {
+        // Only show the tooltip if other tooltips are not visible
+        if ($('.html_tool_tip:visible').length == 0) {
+          tool_tip.show();
+        }
+      }
+    })
+
+    // Close the tooltip when clicking on the close button
+    $(document).delegate(".close_html_tool_tip", "click", function(event) {
       var trigger = $(this);
       var tool_tip_id = trigger.data("tool-tip-id");
       var tool_tip = $("#" + tool_tip_id);
-
       tool_tip.hide();
+      // To prevent jump to the top of the page
+      event.preventDefault();
     });
 
     /////////////////////////////////////////////////////////////////////