Класс BX.UI.Tour.Guide

new BX.UI.Tour.Guide(options)

• options {Object} Коллекция опций.
• steps Шаги тура, обязательная опция. Каждый шаг может содержать следующие параметры:

• target Элемент, для которого будет показано всплывающее окно (шаг тура). Значением может быть либо ссылка на DOM-элемент, либо селектор для поиска через document.querySelector, либо функция, которая возвращает DOM-элемент. Если target не указан или указан неверно, то всплывающее окно будет отображено в центре страницы.

  var guide = new BX.UI.Tour.Guide({
  	steps: [
  		{
  			target: ".crm-robot-btn",
  			title: "Кнопка",
  			text: "Данные попапы призваны помочь вам понять наш сложный продукт."
  		},
  		{
  			target: BX("counter_panel_container"),
  			title: "Счетчики",
  			text: "Текст про счетчики",
  			link: "https://helpdesk.bitrix24.ru/section/108537/",
  		},
  		{
  			target: "#menu-counter-crm_all",
  			title: "Счетчик",
  			text: "Текст про счетчик. Дорогой пользователь! Данные попапы призваны помочь вам понять наш сложный продукт.",
  		},
  		{
  			target: function() {
  			return document.querySelector(".menu-items");
  		},
  			title: "Основное меню",
  			text: "Дорогой пользователь!",
  			link: "#",
  		}
  	});
  

• title {string} Заголовок шага, строка.
• text {string} Текст шага, строка.
• link {string} Ссылка, на которую будет ввести кнопка Подробнее во всплывающем окне, по клику на ссылку откроется новое окно.
• position По умолчанию всплывающее окно позиционируется снизу. Есть возможность принудительно его позиционировать слева или справа от элемента, для которого оно показывается. Для этого в шаге нужно указать параметр position со значением left или right. Если указано позиционирование слева, но там нет места для попапа с подсказкой, то попап автоматически будет позиционирован справа (и наоборот).
• rounded Параметр делает подсветку в форме круга. Например, ее можно использовать для счетчиков.


• article По клику на кнопку Подробнее в попапе можно открывать статьи в слайдере через BX.Helper. Для этого передайте в параметр article символьный код статьи. В этом случае параметр link не нужно указывать.

var guide = new BX.UI.Tour.Guide({
	steps: [
		{
			target: BX("text"),
			title: "Текст",
			text: "Данные попапы призваны помочь вам понять наш сложный продукт.",
			article: "6991043",
		},
		{
			target: "#button",
			title: "Кнопка",
			text: "Каждый день мы наполняем его новым функционалом, разобраться в котором не так просто.",
			link: "https://helpdesk.bitrix24.ru/section/108537/",
			position: "left"
		}
	],
});

• areaPadding Задает дополнительный отступ подсветки от элемента, для которого показана подсказка. По умолчанию равен 10. Если отступ не нужен, укажите в параметре 0.
• id Идентификатор шага. Необязательный параметр.
• events Коллекция обработчиков событий.
• finalStep Устанавливает финальный шаг тура, он позицинируется в центре окна. По умолчанию параметр равен false. Визуальный вид:
  

Для финального шага можно передать следующие параметры:



• buttons В них можно передать классы, текст кнопок и события. По умолчанию выводится одна кнопка с текстом Закрыть, по клику на нее тур закрывается.
• finalTitle {string} Заголовок финального шага.
• finalText {string} Текст финального шага.

Если finalStep не установлен, то последний шаг тура выглядит так:




• autoSave {boolean} Если указано true, то после тура, данный факт будет зафиксирован в опциях текущего пользователя. По умолчанию false.
• events Коллекция обработчиков событий.

Пример простого тура в два шага

<div>
	<button id="button" class="ui-btn ui-btn-primary" style="margin-bottom: 20px">Добавить задачу</button>
	<span id="text" class="ui-alert ui-alert-success" style="width: 70%">
		<span class="ui-alert-message"><strong>Внимание!</strong> Текст успешного сообщения находится здесь.</span>
	</span>
<div>
<script>
		BX.ready(function(){
			var guide = new BX.UI.Tour.Guide({
				steps: [
					{
						target: BX("text"),
						title: "Текст",
						text: "Данные попапы призваны помочь вам понять наш сложный продукт.",
						link: "https://www.bitrix24.ru/",
					},
					{
						target: "#button",
						title: "Кнопка",
						text: "Каждый день мы наполняем его новым функционалом, разобраться в котором не так просто.",
						link: "https://helpdesk.bitrix24.ru/section/108537/",
						position: "left"
					}
				],
			});
			guide.start();
	});
	</script>

Методы

События для BX.UI.Tour.Guide