show user card on click instead of hover

lib/persona.js

@@ -166,7 +166,7 @@ $(document).ready(function() {
 	function setupHoverCards() {
 		require(['components'], function(components) {
 			components.get('topic')
-				.on('mouseover', '[component="user/picture"]', generateUserCard);
+				.on('click', '[component="user/picture"],[component="user/status"]', generateUserCard);
 		});
 
 		$(window).on('action:posts.loading', function(ev, data) {
@@ -176,7 +176,7 @@ $(document).ready(function() {
 		});
 	}
 
-	function generateUserCard() {
+	function generateUserCard(ev) {
 		var avatar = $(this),
 			index = avatar.parents('[data-index]').attr('data-index'),
 			data = (ajaxify.data.topics || ajaxify.data.posts)[index].user;
@@ -223,15 +223,26 @@ $(document).ready(function() {
 				}
 
 				utils.makeNumbersHumanReadable(card.find('.human-readable-number'));
-
-				card.on('mouseleave', function() {
-					card.fadeOut(function() {
-						card.remove();
-					});
-				});
-
+				setupCardRemoval(card);
 				card.fadeIn();
 			});
 		});
+
+		ev.preventDefault();
+		return false;
+	}
+
+	function setupCardRemoval(card) {
+		function removeCard(ev) {
+			if ($(ev.target).closest('.persona-usercard').length === 0) {
+				card.fadeOut(function() {
+					card.remove();
+				});
+
+				$(document).off('click', removeCard);
+			}
+		}
+				
+		$(document).on('click', removeCard);
 	}
 });