diff --git a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6 b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
index e9c0c0df56..c5cdcc4a16 100644
--- a/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
+++ b/app/assets/javascripts/discourse/mixins/card-contents-base.js.es6
@@ -126,7 +126,7 @@ export default Mixin.create({
       if (wantsNewWindow(e)) {
         return;
       }
-      const $target = $(e.target);
+      const $target = $(e.currentTarget);
       return this._show($target.text().replace(/^@/, ""), $target);
     });
 
diff --git a/test/javascripts/acceptance/user-card-test.js.es6 b/test/javascripts/acceptance/user-card-test.js.es6
index c721224fef..d7315953f4 100644
--- a/test/javascripts/acceptance/user-card-test.js.es6
+++ b/test/javascripts/acceptance/user-card-test.js.es6
@@ -9,6 +9,13 @@ QUnit.test("user card", async assert => {
 
   await click("a[data-user-card=eviltrout]:first");
   assert.ok(visible("#user-card"), "card should appear");
+  assert.equal(
+    find("#user-card .username")
+      .text()
+      .trim(),
+    "eviltrout",
+    "user card contains the data"
+  );
 
   sandbox.stub(DiscourseURL, "routeTo");
   await click(".card-content a.user-profile-link");
@@ -19,10 +26,31 @@ QUnit.test("user card", async assert => {
 
   await click("a[data-user-card=charlie]:first");
   assert.ok(visible("#user-card"), "card should appear");
+  assert.equal(
+    find("#user-card .username")
+      .text()
+      .trim(),
+    "charlie",
+    "user card contains the data"
+  );
 
   await click(".card-content .compose-pm button");
   assert.ok(
     invisible("#user-card"),
     "user card dismissed after hitting Message button"
   );
+
+  const mention = find("a.mention");
+  const icon = document.createElement("span");
+  icon.classList.add("icon");
+  mention.append(icon);
+  await click("a.mention .icon");
+  assert.ok(visible("#user-card"), "card should appear");
+  assert.equal(
+    find("#user-card .username")
+      .text()
+      .trim(),
+    "eviltrout",
+    "user card contains the data"
+  );
 });
diff --git a/test/javascripts/fixtures/topic.js.es6 b/test/javascripts/fixtures/topic.js.es6
index 51d9de3137..03d5b661d8 100644
--- a/test/javascripts/fixtures/topic.js.es6
+++ b/test/javascripts/fixtures/topic.js.es6
@@ -446,7 +446,7 @@ export default {
           uploaded_avatar_id: 5253,
           created_at: "2013-02-07T14:02:07.869Z",
           cooked:
-            '<p><aside class="quote" data-post="3" data-topic="280"><div class="title">\n<div class="quote-controls"></div>\n<img width="20" height="20" src="/user_avatar/meta.discourse.org/codinghorror/40/5297.png" class="avatar">codinghorror said:</div>\n<blockquote><p>So you could replace that lookup table with the "de" one to get German.</p></blockquote></aside></p>\n\n<p>The problem I see here is that  this file is likely two grow and change massively over the next couple months, and tracking these changes in order to keep a localized file up to date is going to be a <em>bitch</em>. </p>\n\n<p>I wonder where there is a tool that can compare two yml structures and point out which nodes are missing? That would help keep track of new strings.</p>\n\n<p>Re keeping track of <em>changed</em> strings, <a class="mention" href="/users/codinghorror">@codinghorror</a> I found this very interesting: <a href="http://stackoverflow.com/questions/4232922/why-do-people-use-plain-english-as-translation-placeholders" rel="nofollow">http://stackoverflow.com/questions/4232922/why-do-people-use-plain-english-as-translation-placeholders</a> if plain English placeholders were used, any change in strings would lead to a <em>new</em> node in the yml file, making keeping the translation up to date easier. Maybe worth thinking about in the future.</p>',
+            '<p><aside class="quote" data-post="3" data-topic="280"><div class="title">\n<div class="quote-controls"></div>\n<img width="20" height="20" src="/user_avatar/meta.discourse.org/codinghorror/40/5297.png" class="avatar">codinghorror said:</div>\n<blockquote><p>So you could replace that lookup table with the "de" one to get German.</p></blockquote></aside></p>\n\n<p>The problem I see here is that  this file is likely two grow and change massively over the next couple months, and tracking these changes in order to keep a localized file up to date is going to be a <em>bitch</em>. </p>\n\n<p>I wonder where there is a tool that can compare two yml structures and point out which nodes are missing? That would help keep track of new strings.</p>\n\n<p>Re keeping track of <em>changed</em> strings, <a class="mention" href="/users/eviltrout">@eviltrout</a> I found this very interesting: <a href="http://stackoverflow.com/questions/4232922/why-do-people-use-plain-english-as-translation-placeholders" rel="nofollow">http://stackoverflow.com/questions/4232922/why-do-people-use-plain-english-as-translation-placeholders</a> if plain English placeholders were used, any change in strings would lead to a <em>new</em> node in the yml file, making keeping the translation up to date easier. Maybe worth thinking about in the future.</p>',
           post_number: 5,
           post_type: 1,
           updated_at: "2013-02-07T14:05:42.328Z",