Как показать балун по наведению на метку и скрыть по таймауту?

Здравствуйте. Собственно проблема описано в сабже. Вот код:

let balloonLayout = ymaps.templateLayoutFactory.createClass(balloonHtml, {
  build: function () {
    this.constructor.superclass.build.call(this);
    this._$element = $('.lw-balloon', this.getParentElement());
    this.applyElementOffset();
    this._$element.find('.close').on('click', $.proxy(this.onCloseClick, this));
  },
  clear: function () {
    this._$element.find('.close').off('click');
    this.constructor.superclass.clear.call(this);
  },
  onSublayoutSizeChange: function () {
    balloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);
    if(!this._isElement(this._$element)) {
      return;
    }
    this.applyElementOffset();
    this.events.fire('shapechange');
  },
  applyElementOffset: function () {
    this._$element.css({
      left: -(this._$element[0].offsetWidth / 2),
      top: -(this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight)
    });
  },
  onCloseClick: function (e) {
    e.preventDefault();
    this.events.fire('userclose');
  },
  getShape: function () {
    if(!this._isElement(this._$element)) {
      return balloonLayout.superclass.getShape.call(this);
    }
    var position = this._$element.position();
    return new ymaps.shape.Rectangle(new ymaps.geometry.pixel.Rectangle([
          [position.left, position.top],
            [
              position.left + this._$element[0].offsetWidth,
              position.top + this._$element[0].offsetHeight + this._$element.find('.arrow')[0].offsetHeight
            ]
          ]
        ));
  },
  _isElement: function (element) {
    return element && element[0] && element.find('.lw-balloon__list')[0];
  }
});

let pin = new ymaps.Placemark(context.coords, {}, {
              balloonShadow: false,
              balloonLayout: balloonLayout,
              iconLayout: pinLayout,
              balloonPanelMaxMapArea: 0,
              openBalloonOnClick: false,
              iconShape: {
                type: 'Rectangle',
                coordinates: [
                  [pinSize/-2, -pinSize], [pinSize/2, 0]
                ]
              }
            });
pin.events.add('mouseenter', (e) => {
  let position = e.get('target').geometry.getCoordinates();
  let balloon = e.get('target').balloon;
  let timeout = 1500;
  let timeoutId;
  balloon.open(position);

  let makeTimeout = () => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(function () {
      pin.events.remove('mouseleave');
      balloon.events.remove('mouseleave');
      balloon.close();
    }, timeout);
  };

  pin.events.add('mouseleave', () => {
    makeTimeout();
  });
  balloon.events.add('mouseenter', () => {
    clearTimeout(timeoutId);
  });
  balloon.events.add('mouseleave', () => {
    makeTimeout();
  });
});

pinCollection.add(pin);

Теперь о конкретных проблемах:
1) В текущей реализации балун отображается не над меткой, а в левом верхнем углу карты. Как это исправить? (балун имеет кастомный лейаут, может ли влияеть на его поведение position:absolute?).
2) Когда срабатывает таймаут балун не закрывается, а в консоль падает ошибка

Uncaught TypeError: Cannot read property 'destroy' of null

Что я делаю не так? Спасибо.