diff --git a/app/assets/javascripts/discourse/components/input-tip.js.es6 b/app/assets/javascripts/discourse/components/input-tip.js.es6
index 28e73eb0a2b..1a12d8ebc0e 100644
--- a/app/assets/javascripts/discourse/components/input-tip.js.es6
+++ b/app/assets/javascripts/discourse/components/input-tip.js.es6
@@ -1,21 +1,30 @@
 import { alias, not } from "@ember/object/computed";
 import Component from "@ember/component";
-import { bufferedRender } from "discourse-common/lib/buffered-render";
 import { iconHTML } from "discourse-common/lib/icon-library";
 
-export default Component.extend(
-  bufferedRender({
-    classNameBindings: [":tip", "good", "bad"],
-    rerenderTriggers: ["validation"],
+export default Component.extend({
+  classNameBindings: [":tip", "good", "bad"],
+  rerenderTriggers: ["validation"],
+  tipIcon: null,
+  tipReason: null,
 
-    bad: alias("validation.failed"),
-    good: not("bad"),
+  bad: alias("validation.failed"),
+  good: not("bad"),
 
-    buildBuffer(buffer) {
-      const reason = this.get("validation.reason");
-      if (reason) {
-        buffer.push(iconHTML(this.good ? "check" : "times") + " " + reason);
-      }
+  tipIconHTML() {
+    let icon = iconHTML(this.good ? "check" : "times");
+    return `${icon}`.htmlSafe();
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    let reason = this.get("validation.reason");
+    if (reason) {
+      this.set("tipIcon", this.tipIconHTML());
+      this.set("tipReason", reason);
+    } else {
+      this.set("tipIcon", null);
+      this.set("tipReason", null);
     }
-  })
-);
+  }
+});
diff --git a/app/assets/javascripts/discourse/templates/components/input-tip.hbs b/app/assets/javascripts/discourse/templates/components/input-tip.hbs
new file mode 100644
index 00000000000..ade54357b51
--- /dev/null
+++ b/app/assets/javascripts/discourse/templates/components/input-tip.hbs
@@ -0,0 +1 @@
+{{tipIcon}} {{tipReason}}