whole_func_string: function() {
          var rect = this.element.getClientRects()[0];
  
          this.completer.style.top = rect.top + 'px';
          var height = rect.bottom - rect.top;
          this.completer.style.height = height + 'px';
          this.completer.style.lineHeight = height + 'px';
          this.completer.style.left = rect.left + 'px';
          var width = rect.right - rect.left;
          this.completer.style.width = width + 'px';
  
          if (this.hintDirection.get() === 'below') {
              this.hinter.style.top = rect.bottom + 'px';
              this.hinter.style.bottom = 'auto';
          }
          else {
              this.hinter.style.top = 'auto';
              this.hinter.style.bottom = (this.doc.documentElement.clientHeight - rect.top) + 'px';
          }
          this.hinter.style.left = (rect.left + 30) + 'px';
          this.hinter.style.maxWidth = (width - 110) + 'px';
  
          if (this.popupOutput) {
              if (this.outputDirection.get() === 'below') {
                  this.output.style.top = rect.bottom + 'px';
                  this.output.style.bottom = 'auto';
              }
              else {
                  this.output.style.top = 'auto';
                  this.output.style.bottom = (this.doc.documentElement.clientHeight - rect.top) + 'px';
              }
              this.output.style.left = rect.left + 'px';
              this.output.style.width = (width - 80) + 'px';
          }
      }
func_code_string: function() {
          var rect = this.element.getClientRects()[0];
  
          this.completer.style.top = rect.top + 'px';
          var height = rect.bottom - rect.top;
          this.completer.style.height = height + 'px';
          this.completer.style.lineHeight = height + 'px';
          this.completer.style.left = rect.left + 'px';
          var width = rect.right - rect.left;
          this.completer.style.width = width + 'px';
  
          if (this.hintDirection.get() === 'below') {
              this.hinter.style.top = rect.bottom + 'px';
              this.hinter.style.bottom = 'auto';
          }
          else {
              this.hinter.style.top = 'auto';
              this.hinter.style.bottom = (this.doc.documentElement.clientHeight - rect.top) + 'px';
          }
          this.hinter.style.left = (rect.left + 30) + 'px';
          this.hinter.style.maxWidth = (width - 110) + 'px';
  
          if (this.popupOutput) {
              if (this.outputDirection.get() === 'below') {
                  this.output.style.top = rect.bottom + 'px';
                  this.output.style.bottom = 'auto';
              }
              else {
                  this.output.style.top = 'auto';
                  this.output.style.bottom = (this.doc.documentElement.clientHeight - rect.top) + 'px';
              }
              this.output.style.left = rect.left + 'px';
              this.output.style.width = (width - 80) + 'px';
          }
      }
func_documentation_string: To be called on window resize or any time we want to align the elements
  with the input box.