help.js

var _help = {},
	_helpEl = {};
	_helpEl.temp = {};
	_helpEl.temp.parent = [];
	_helpEl.temp.queue = [];
	_helpEl.temp.count = 0;
	_helpEl.temp.style = {};
	_helpEl.temp.size = {};
	_helpEl.temp.wrap;

_help.create = function(el){
  return document.createElement(el);
}

_help.append = function(){
  for (var i = 1; i < arguments.length; i++) {
    arguments[0].appendChild(arguments[i]);
  }
}

_help.remove = function(){
  for (var i = 0; i < arguments.length; i++) {
    arguments[i].parentNode.removeChild(arguments[i]);
  }
}

_help.createBg = function(){
	var bg = _help.create('div');
	bg.style.cssText = `
	  position: fixed;
	  left: initial;
	  top: initial;
	  right: 0;
	  bottom: 0;
	  width: 40px;
	  height: 40px;
	  border-radius: 50%;
	  background-color: rgba(0,0,0,0.75);
	  z-index: 9998;
	  transition: all .5s ease`;
	 _helpEl.bg = bg;
	_help.append(document.body, bg);
}

_help.dispNone = function(){
  for (var i = 0; i < arguments.length; i++) {
    arguments[i].style.display = 'none';
  }
}

_help.saveStyle = function(obj, _name){
	if (_helpEl.temp.style[_name]){
	  console.log('сохраненые стили с названием '+_name+' уже существуют. Переименуйте')
	  return
	}
	_helpEl.temp.style[_name] = Object.keys(obj.style).map((key) => {
	  let val = obj.style[key];
	  return {name:key, val:val}
	})
}

_help.restoreStyle = function(obj, _name, del){
	if (!_helpEl.temp.style[_name]){
	  console.log('сохраненые стили с названием '+_name+' не существуют.');
	  return
	}
	_helpEl.temp.style[_name].forEach(el => {
	  obj.style[el.name] = el.val
	})
	if (del == true) {
	  delete _helpEl.temp.style[_name]
	}
}

_help.css = function(obj, styl){
	Object.keys(styl).forEach((key) => {
	  obj.style[key] = styl[key];
	})
}

_help.bgcParent = function(_elem){
	if (getComputedStyle(_elem).backgroundColor == "rgba(0, 0, 0, 0)") {
	  return _help.bgcParent(_elem.parentNode)
	}
	else{
	  return getComputedStyle(_elem).backgroundColor
	}
}

_help.setZIndexParent = function(_elem){
	if (_elem.parentElement != null) {
	
	  if (getComputedStyle(_elem).opacity != "1") {
	    _elem.style.opacity = '1';
	    _helpEl.temp.parent.push(_elem);
	  }
	  if (getComputedStyle(_elem).zIndex != "auto") {
	    _elem.style.zIndex = 'inherit';
	    _helpEl.temp.parent.push(_elem);
	  }
	
	  if (getComputedStyle(_elem).position == 'fixed') {
	    _helpEl.temp.parent.push(_elem);
	    _elem.style.position = 'absolute';
	  }
	  if (getComputedStyle(_elem).transform != 'none') {
	    _helpEl.temp.parent.push(_elem);
	    _elem.style.transform = 'none';
	  }

	  _help.setZIndexParent(_elem.parentElement)
	}
}

_help.zIndexParentReset = function(){
	_helpEl.temp.parent.forEach(function(el){
	  el.style.zIndex = '';
	  el.style.position = '';
	  el.style.opacity = '';
	  el.style.transform = '';
	})
	_helpEl.temp.parent = [];
}

_help.remakePosWrap = function(_obj){//сохраняет размеры объекта и меняет координаты help окна если размеры окна изменились
	_helpEl.temp.remakePosWrapInterval = setInterval(function(){
	  if (_helpEl.temp.wrap)
	  if (_helpEl.temp.size.height != _obj.offsetHeight ||
	    _helpEl.temp.size.width != _obj.offsetWidth)
	  {
	    _helpEl.temp.size.width = _obj.offsetWidth;
	    _helpEl.temp.size.height = _obj.offsetHeight;
	    var coord = _help.getPosSize(_obj);
	    var wrap_coord = _help.coordHelp(coord);
	    _helpEl.temp.wrap.style.left = wrap_coord.left+'px';
	    _helpEl.temp.wrap.style.top = wrap_coord.top+'px';
		console.log(wrap_coord, _helpEl.temp.wrap.style.left, _helpEl.temp.wrap.style.top);
	  }
	},200)
}

_help.getPosSize = function(_elem){
	var coord = {};
	coord.top = _elem.getBoundingClientRect().top + window.scrollY;
	coord.left = _elem.getBoundingClientRect().left + window.scrollX;
	coord.right = _elem.getBoundingClientRect().right;
	coord.bottom = _elem.getBoundingClientRect().bottom;
	coord.width = _elem.getBoundingClientRect().width;
	coord.height = _elem.getBoundingClientRect().height;
	
	if ( getComputedStyle(_elemEl).position == 'fixed' ) {
	  coord.top = _elemEl.getBoundingClientRect().top;
	  coord.left = _elemEl.getBoundingClientRect().left;
	}
	return coord
}

_help.coordHelp = function(cord){
	var ww = document.documentElement.clientWidth,
		wh = document.documentElement.clientHeight;
	var x = ww / 2 - 250,
		y = cord.top;
	if(cord.left > 500) {
	  x = cord.left - 500
	}
	else if(cord.left < 500) {
	  x = cord.right + 50
	}
	if (cord.left < 500 && cord.right + 500 > ww) {
	  x = ww / 2 - 250
	  if (cord.top > 500) {
	    y = cord.top - 500
	  }
	  else {
	    y = cord.bottom + 50
	  }
	}
	return {left:x, top:y};
}

_help.ligthHelp = function(_head, _text, _elem, _next, _callback){
	console.log(arguments);
	_nextEl = _next();
	_elemEl = _elem();
	var wrap_coord,
		wrap_pos;
	_help.setZIndexParent(_elemEl.parentNode);
	var coord = _help.getPosSize(_elemEl);
	var color = _help.bgcParent(_elemEl);

	
	_help.saveStyle(_elemEl, 'main');

	setTimeout(()=>{
	  _help.css(_elemEl, {
	    zIndex: '9999',
	    backgroundColor: color,
	    boxShadow: '0 0 10px 5px rgba(255,255,255, 0.5)',
	  })
	  if (getComputedStyle(_elemEl).position != 'absolute' && getComputedStyle(_elemEl).position != 'fixed') {
	    _help.css(_elemEl, {
	      position: 'relative',
	      top: '0px',
	      left: '0px',
	    });
	  }
	})

	if (getComputedStyle(_elemEl).position != 'absolute' && getComputedStyle(_elemEl).position != 'fixed') {
	  wrap_pos = 'absolute';
	}
	else {
	  wrap_pos = getComputedStyle(_elemEl).position;
	}

	_help.remakePosWrap(_elemEl);
	wrap_coord = _help.coordHelp(coord);
	
	var wrap = _help.create('div');
	wrap.style.cssText = `
	  position: ${wrap_pos};
	  opacity: 1;
	  z-index: 9999;
	  background-color: transparent;
	  color: #fff;
	  min-width: 400px;
	  max-width: 500px;
	  left: ${wrap_coord.left}px;
	  top: ${wrap_coord.top}px;`;
	
	var close = _help.create('i');
	close.className = "fa fa-ban fa-2x";
	close.style.float = 'right';

	var head = _help.create('h3');
	head.style.color = '#fff';
	head.style.marginTop = '0';
	head.textContent = _head;

	var text = _help.create('p');
	text.style.color = '#fff';
	text.style.textAlign = 'left';
	text.innerHTML = _text;

	var but = _help.create('button');
	but.className="btn btn-sm btn-primary m-r-5";
	if (_callback) {
	  but.textContent = 'Далее';
	}
	else {
	  but.textContent = 'Закрыть';
	}

	but.onclick = function(){
	  if( _nextEl.onclick ) _nextEl.onclick();
	  hide();
	  if( _callback ) _callback();
	}
	
	if( typeof(_nextEl) == 'undefined' ){
	  var connect_next = setInterval(function(){
	  _nextEl = _next();
	    if( typeof(_nextEl) != 'undefined'){
	      _nextEl.addEventListener('click', but.onclick);
	      clearInterval(connect_next);
	    }
	  },200)
	}
	else if( typeof(_nextEl) != 'undefined'){
	  _nextEl.addEventListener('click', but.onclick);
	}

	function hide(){
	  _helpEl.temp.wrap = undefined;
	  clearInterval(_helpEl.temp.remakePosWrapInterval)
	  _nextEl.removeEventListener('click', but.onclick);
	  _help.remove(wrap);
	  _help.restoreStyle(_elemEl, 'main', true);
	  _help.zIndexParentReset();
	}

	_help.remakeShow = hide.bind(undefined);

	close.onclick = function(){
	  hide()
	  _help.hide()
	}

	_help.css(_helpEl.bg, {
	  left: 0,
	  top: 0,
	  right: 'initial',
	  bottom: 'initial',
	  width: '100%',
	  height: '100%',
	  borderRadius: 0,
	})
	_help.append(wrap, close, head, text, but);
	_help.append(document.body, wrap);
	_helpEl.temp.wrap = wrap;
}

_help.remakeShow;
/*
_help.start = function(){
	var start = localStorage.getItem('_helpStart');
	if (start) return
	
	var head = "Добро пожаловать в систему GIBRID";
	var text = `Данный помощьник поможет вам соориентироваться в личном кабинете,
	мы проведем неболшую экскурсию и покажем вам что где находиться.
	`;
	var ww = document.documentElement.clientWidth,
	wh = document.documentElement.clientHeight;
	var blank = _help.create('div');
	_help.css(blank, {
	  position: 'fixed',
	  left: ww / 2 + 250 + 'px',
	  top: '200px',
	  width: 0,
	  height: 0,
	})
	_help.append(document.body, blank);
	_help.show([{head: head, text: text, object:blank, next:remove}])
	function remove(){
	  _help.remove(blank)
	}
	localStorage.getItem('_helpStart', 'false');
}
*/
_help.hide = function(){
	_helpEl.temp.count = 0;
	_helpEl.temp.queue = [];
	localStorage.removeItem('helpIteration');

	_help.css(_helpEl.bg, {
	  left: 'initial',
	  top: 'initial',
	  right: 0,
	  bottom: 0,
	  width: 40 + 'px',
	  height: 40 + 'px',
	  borderRadius: '50%'
	})
}

_help.next = function(){
	if (_helpEl.temp.count == _helpEl.temp.queue.length){
	  _helpEl.temp.count = 0;
	  _helpEl.temp.queue = [];
	  _help.hide();
	}
	else {
	  _helpEl.temp.queue[_helpEl.temp.count](); //вызываем ф-ции render по очереди
	  _helpEl.temp.count++;
	}
}

_help.show = function(){
	var args = Array.prototype.slice.call(arguments);
	var arr = [];
	args.forEach(el => {
	  el.forEach(el => {
	    arr.push(el)
	  })
	})
	_helpEl.temp.queue.push( _help.render.bind(undefined, arr) ); //добавляем ф-ции render в массив
	if (_helpEl.temp.count == 0) {
	  _help.next()
	}
}

_help.render = function(){//ассинхронный перебор массива
	arr = arguments[0]; //[{head, text, object, next}]
	var count = 0;

	var stor = JSONfn.parse(localStorage.getItem('helpIteration'));
	if( stor ){
	  count = stor.count;
	  arr = stor.arr;
	  if (typeof _help.remakeShow == 'function') _help.remakeShow()
	}

	function movie(){
	  console.log({arr: arr, count: count})
	  var helpIteration = {arr: arr, count: count};
	  localStorage.setItem('helpIteration', JSONfn.stringify(helpIteration));

	  if (count < arr.length-1) {
	    _help.ligthHelp(arr[count].head, arr[count].text, arr[count].object, arr[count].next, movie)
	    count++;
	  }
	  else if (count == arr.length-1) {
	    _help.ligthHelp(arr[count].head, arr[count].text, arr[count].object, arr[count].next, movie)
	    count++;
	  }
	  else if (count == arr.length) {
	    _help.next();
	    localStorage.removeItem('helpIteration')
	  }
	}
	movie()
}

var JSONfn = {};
JSONfn.stringify = function (obj) {
	return JSON.stringify(obj, function (key, value) {
	  var fnBody;
	  if (value instanceof Function || typeof value == 'function') {
	    fnBody = value.toString();
	    if (fnBody.length < 8 || fnBody.substring(0, 8) !== 'function') { //this is ES6 Arrow Function
	      return '_NuFrRa_' + fnBody;
	    }
	    return fnBody;
	  }
	  if (value instanceof RegExp) {
	    return '_PxEgEr_' + value;
	  }
	  return value;
	});
};

JSONfn.parse = function (str, date2obj) {
	var iso8061 = date2obj ? /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}(?:\.\d*)?)Z$/ : false;
	return JSON.parse(str, function (key, value) {
	  var prefix;
	  if (typeof value != 'string') {
	    return value;
	  }
	  if (value.length < 8) {
	    return value;
	  }
	  prefix = value.substring(0, 8);

	  if (iso8061 && value.match(iso8061)) {
	    return new Date(value);
	  }
	  if (prefix === 'function') {
	    return eval('(' + value + ')');
	  }
	  if (prefix === '_PxEgEr_') {
	    return eval(value.slice(8));
	  }
	  if (prefix === '_NuFrRa_') {
	    return eval(value.slice(8));
	  }

	  return value;
	});
};


//pageLoadSuccess(_help.render)//нужео поместить в вашу ф-цию которая будет вызывать _help.render призагрузки страници, если у вас сонтент подгружаеться аджаксом
_help.createBg();

чтоб вызвать нужно создать свой helpList
let helpList = { start:[ {head:"Заголовок", text: "Описание", object: function(){return Element}, next: function(){return Element}}, {}, {}], end:[ ]};
_help.show( helpList.start )