diff --git a/app/assets/javascripts/discourse/components/popup-input-tip.js.es6 b/app/assets/javascripts/discourse/components/popup-input-tip.js.es6
index 3f3c3d514be..6254fe2f1e8 100644
--- a/app/assets/javascripts/discourse/components/popup-input-tip.js.es6
+++ b/app/assets/javascripts/discourse/components/popup-input-tip.js.es6
@@ -5,70 +5,67 @@ import {
   default as discourseComputed,
   observes
 } from "discourse-common/utils/decorators";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 
-export default Component.extend(
-  bufferedRender({
-    classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
-    animateAttribute: null,
-    bouncePixels: 6,
-    bounceDelay: 100,
-    rerenderTriggers: ["validation.reason"],
+export default Component.extend({
+  classNameBindings: [":popup-tip", "good", "bad", "lastShownAt::hide"],
+  animateAttribute: null,
+  bouncePixels: 6,
+  bounceDelay: 100,
+  rerenderTriggers: ["validation.reason"],
+  closeIcon: `${iconHTML("times-circle")}`.htmlSafe(),
+  tipReason: null,
 
-    click() {
-      this.set("shownAt", null);
-      this.set("validation.lastShownAt", null);
-    },
+  click() {
+    this.set("shownAt", null);
+    this.set("validation.lastShownAt", null);
+  },
 
-    bad: alias("validation.failed"),
-    good: not("bad"),
+  bad: alias("validation.failed"),
+  good: not("bad"),
 
-    @discourseComputed("shownAt", "validation.lastShownAt")
-    lastShownAt(shownAt, lastShownAt) {
-      return shownAt || lastShownAt;
-    },
+  @discourseComputed("shownAt", "validation.lastShownAt")
+  lastShownAt(shownAt, lastShownAt) {
+    return shownAt || lastShownAt;
+  },
 
-    @observes("lastShownAt")
-    bounce() {
-      if (this.lastShownAt) {
-        var $elem = $(this.element);
-        if (!this.animateAttribute) {
-          this.animateAttribute =
-            $elem.css("left") === "auto" ? "right" : "left";
-        }
-        if (this.animateAttribute === "left") {
-          this.bounceLeft($elem);
-        } else {
-          this.bounceRight($elem);
-        }
+  @observes("lastShownAt")
+  bounce() {
+    if (this.lastShownAt) {
+      var $elem = $(this.element);
+      if (!this.animateAttribute) {
+        this.animateAttribute = $elem.css("left") === "auto" ? "right" : "left";
       }
-    },
-
-    buildBuffer(buffer) {
-      const reason = this.get("validation.reason");
-      if (!reason) {
-        return;
-      }
-
-      buffer.push(
-        `<span class='close'>${iconHTML("times-circle")}</span>${reason}`
-      );
-    },
-
-    bounceLeft($elem) {
-      for (var i = 0; i < 5; i++) {
-        $elem
-          .animate({ left: "+=" + this.bouncePixels }, this.bounceDelay)
-          .animate({ left: "-=" + this.bouncePixels }, this.bounceDelay);
-      }
-    },
-
-    bounceRight($elem) {
-      for (var i = 0; i < 5; i++) {
-        $elem
-          .animate({ right: "-=" + this.bouncePixels }, this.bounceDelay)
-          .animate({ right: "+=" + this.bouncePixels }, this.bounceDelay);
+      if (this.animateAttribute === "left") {
+        this.bounceLeft($elem);
+      } else {
+        this.bounceRight($elem);
       }
     }
-  })
-);
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    let reason = this.get("validation.reason");
+    if (reason) {
+      this.set("tipReason", `${reason}`.htmlSafe());
+    } else {
+      this.set("tipReason", null);
+    }
+  },
+
+  bounceLeft($elem) {
+    for (var i = 0; i < 5; i++) {
+      $elem
+        .animate({ left: "+=" + this.bouncePixels }, this.bounceDelay)
+        .animate({ left: "-=" + this.bouncePixels }, this.bounceDelay);
+    }
+  },
+
+  bounceRight($elem) {
+    for (var i = 0; i < 5; i++) {
+      $elem
+        .animate({ right: "-=" + this.bouncePixels }, this.bounceDelay)
+        .animate({ right: "+=" + this.bouncePixels }, this.bounceDelay);
+    }
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/popup-input-tip.hbs b/app/assets/javascripts/discourse/templates/components/popup-input-tip.hbs
new file mode 100644
index 00000000000..ded803482fb
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/popup-input-tip.hbs
@@ -0,0 +1 @@
+<span class='close'>{{closeIcon}}</span>{{tipReason}}