diff --git a/src/ol/control/MousePosition.js b/src/ol/control/MousePosition.js
index 1fc373506d..d151a964bd 100644
--- a/src/ol/control/MousePosition.js
+++ b/src/ol/control/MousePosition.js
@@ -72,13 +72,17 @@ const MousePosition = function(opt_options) {
     this.setProjection(options.projection);
   }
 
-  this.clearOnMouseOut_ = options.clearOnMouseOut !== undefined ? options.clearOnMouseOut : true;
-
   /**
    * @private
    * @type {string}
    */
-  this.undefinedHTML_ = options.undefinedHTML !== undefined ? options.undefinedHTML : '';
+  this.undefinedHTML_ = 'undefinedHTML' in options ? options.undefinedHTML : '';
+
+  /**
+   * @private
+   * @type {boolean}
+   */
+  this.renderOnMouseOut_ = this.undefinedHTML_ !== undefined;
 
   /**
    * @private
@@ -194,7 +198,7 @@ MousePosition.prototype.setMap = function(map) {
     this.listenerKeys.push(
       listen(viewport, EventType.MOUSEMOVE, this.handleMouseMove, this)
     );
-    if (this.clearOnMouseOut_) {
+    if (this.renderOnMouseOut_) {
       this.listenerKeys.push(
         listen(viewport, EventType.MOUSEOUT, this.handleMouseOut, this)
       );
@@ -232,7 +236,7 @@ MousePosition.prototype.setProjection = function(projection) {
  * @private
  */
 MousePosition.prototype.updateHTML_ = function(pixel) {
-  let html = this.undefinedHTML_;
+  let html = this.undefinedHTML_ === undefined ? ' ' : this.undefinedHTML_;
   if (pixel && this.mapProjection_) {
     if (!this.transform_) {
       const projection = this.getProjection();
diff --git a/test/spec/ol/control/mouseposition.test.js b/test/spec/ol/control/mouseposition.test.js
index 8a374f7226..acd584c8da 100644
--- a/test/spec/ol/control/mouseposition.test.js
+++ b/test/spec/ol/control/mouseposition.test.js
@@ -65,40 +65,38 @@ describe('ol.control.MousePosition', function() {
       document.querySelector('div.ol-viewport').dispatchEvent(evt);
     }
 
-    describe('clearOnMouseOut', function() {
-      it('sets div.ol-mouse-position undefinedHTML when clearOnMouseOut=true', function(done) {
+    describe('undefinedHTML', function() {
+      it('sets div.ol-mouse-position to options.undefinedHTML when mouse moves out', function(done) {
         const ctrl = new MousePosition({
-          undefinedHTML: 'undefined',
-          clearOnMouseOut: true
+          undefinedHTML: 'some text'
         });
         ctrl.setMap(map);
         map.renderSync();
 
         const element = document.querySelector('.ol-mouse-position', map.getTarget());
-        expect(element.innerText).to.be('undefined');
+        expect(element.innerText).to.be('some text');
 
         simulateEvent(EventType.MOUSEMOVE, 20, 30);
         map.renderSync();
         expect(element.innerText).to.be('20,-30');
 
         map.once('postrender', function() {
-          expect(element.innerText).to.be('undefined');
+          expect(element.innerText).to.be('some text');
           done();
         });
         simulateEvent(EventType.MOUSEOUT, width + 1, height + 1);
         map.renderSync();
       });
 
-      it('keeps div.ol-mouse-position set when clearOnMouseOut=false', function(done) {
+      it('Retain mouse position in div.ol-mouse-position when options.undefinedHTML=undefined and mouse moves outside the viewport', function(done) {
         const ctrl = new MousePosition({
-          undefinedHTML: 'undefined',
-          clearOnMouseOut: false
+          undefinedHTML: undefined
         });
         ctrl.setMap(map);
         map.renderSync();
 
         const element = document.querySelector('.ol-mouse-position', map.getTarget());
-        expect(element.innerText).to.be('undefined');
+        expect(element.innerHTML).to.be(' ');
 
         target.dispatchEvent(new MouseEvent('mousemove'));
         simulateEvent(EventType.MOUSEMOVE, 20, 30);