diff --git a/index.js b/index.js
index 74ea608..cd21dd7 100644
--- a/index.js
+++ b/index.js
@@ -121,7 +121,7 @@ function initialize () {
           newGistId = newGist.user.login + '/' + newGistId
         }
         ui.$spinner.hide()
-        if (err) ui.tooltipMessage('error', err.toString())
+        if (err) ui.showTooltipMessage('error', err.toString())
         if (newGistId) window.location.href = '/?gist=' + newGistId
       })
     })
@@ -131,7 +131,7 @@ function initialize () {
   // if gistID is not set, fallback to specific queryParams, local storage
   githubGist.getCode(gistID, function (err, code) {
     ui.$spinner.hide()
-    if (err) return ui.tooltipMessage('error', JSON.stringify(err))
+    if (err) return ui.showTooltipMessage('error', JSON.stringify(err))
 
     editors.init(code)
     editors.setActive('bundle')
@@ -212,6 +212,7 @@ function initialize () {
 
     sandbox.on('bundleStart', function () {
       ui.$spinner.show()
+      ui.hideTooltipMessage()
     })
 
     sandbox.on('bundleEnd', function (bundle) {
@@ -220,7 +221,7 @@ function initialize () {
 
     sandbox.on('bundleError', function (err) {
       ui.$spinner.hide()
-      ui.tooltipMessage('error', 'Bundling error: \n\n' + err)
+      ui.showTooltipMessage('error', 'Bundling error: \n\n' + err)
     })
 
     if (parsedURL.query.save) return
diff --git a/lib/ui-controller.js b/lib/ui-controller.js
index 99ba381..ae26a56 100644
--- a/lib/ui-controller.js
+++ b/lib/ui-controller.js
@@ -23,31 +23,49 @@ var controls = {
     markdownBadgeTextarea.value = '[![view on requirebin](' + window.location.origin + '/badge.png)](' + window.location.origin + '/?gist=' + gistID + ')'
   },
   /**
-   * display error/warning messages in the site header
-   * cssClass should be a default bootstrap class
-   * @param {String} cssClass warning|alert|info|success
-   * @param text message content
+   * return alert element
    */
-  tooltipMessage: function (cssClass, text) {
+  getTooltipMessage: function () {
     var message = document.querySelector('.alert')
-    if (message) {
-      message.classList.remove('hidden')
-      message.classList.add('alert-' + cssClass)
-      message.innerHTML = text
-    } else {
+    if (!message) {
       message = document.createElement('div')
-      message.classList.add('alert')
+      message.className = 'alert'
       var close = document.createElement('span')
-      close.classList.add('pull-right')
+      close.className.add('pull-right')
       close.innerHTML = '&times'
       close.addEventListener('click', function () {
         this.parentNode.classList.add('hidden')
       }, false)
-      message.classList.add('alert-' + cssClass)
-      message.innerHTML = text
       document.querySelector('body').appendChild(message)
       message.appendChild(close)
     }
+    return message
+  },
+  /**
+   * alias for showTooltipMessage
+   */
+  tooltipMessage: function (cssClass, text) {
+    return this.showTooltipMessage(cssClass, text)
+  },
+  /**
+   * display error/warning messages in the site header
+   * cssClass should be a default bootstrap class
+   * @param {String} cssClass warning|alert|info|success
+   * @param text message content
+   */
+  showTooltipMessage: function (cssClass, text) {
+    var message = this.getTooltipMessage()
+    message.innerHTML = text
+    message.classList.add('alert-' + cssClass)
+    message.classList.remove('hidden')
+  },
+  /**
+   * hide and clean alert element
+   */
+  hideTooltipMessage: function () {
+    var message = this.getTooltipMessage()
+    message.className = 'alert hidden'
+    message.innerHTML = ''
   },
 
   showForks: function (forks, parent) {