Иногда, чтобы не писать «руководство пользователя», проще сделать небольшое «интро», своеобразный «путеводитель» по сайту. Поможет в этом хороший скрипт Intro.js
Текст для тура отображается в тегах вида:
<div class="form-group w-100 mb-2" data-step="7" data-intro='Сменить пароль для входа в личный кабинет'>
<label for="user_password" class="mb-1 fw-bold">Пароль</label>
<input id="user_password" type="password" class="form-control" autocomplete="off" onkeyup="confirmNewPass();">
</div>
Запуск тура можно сделать например так:
function GlobalTourStart(){
introJs().onbeforechange(function(targetElement) {
slider=$(".sidebar")[0].getBoundingClientRect().left;
if (slider<0) {
if (targetElement.id=="logout_div"){
document.getElementById('sidebar_btn').click();
};
};
}).setOptions({
"showBullets": true,
"showStepNumbers": false,
"prevLabel":"Назад",
"nextLabel":"Дальше",
'doneLabel': 'Закончить',
'tooltipPosition': 'right',
"onbeforechange": function(targetElement) {
console.log(targetElement);
}
}).start();
};
В моём случае, я предусмотрел что «если следующий слайд в меню-гамбургере, и оно скрыто, то открываем его»