EnjoyHint - могу ли я получить подсказку без указания элемента?

Question

Я хотел бы получить вводную подсказку в EnjoyHint, от которой пользователь может перейти, просто нажав «Далее». Так что стрелки к элементу нет. Возможно ли это?

Answer 1

var enjoyhint_script_steps = [
{
    'next .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
    showSkip: false,
    showNext: true,
    onBeforeStart: function () {
        $('#enjoyhint_arrpw_line').hide();
    }
},
{
    ...rest of step 2...
}
...rest of steps...

];

Объяснение

Существует лучшее решение, чем нацеливание на скрытый div при назначении события 'click'.

Событие 'click' ожидает, что пользователь щелкнет выделенный элемент, чтобы перейти к следующему шагу, и когда ваш элемент скрыт, вы не можете щелкнуть по нему.

Чтобы иметь 'Далее 'по умолчанию и нацелите пользователя на то, чтобы щелкнуть по ней, вам нужно использовать событие' next '.

onBeforeStart дает вам возможность запускать любую функцию, которую вы хотите, непосредственно перед этой c подсказкой запускается, поэтому вы можете запустить:

function () {
    $('#enjoyhint_arrpw_line').hide();
}

Внутри onBeforeStart. Когда вы делаете это так, вы можете выделить любой элемент на странице без стрелки и иметь обязательную кнопку «Далее».

Вы также можете написать это так, если оно более читабельно:

    var enjoyhint_script_steps = [
    {
        event: 'next',
        selector: '.hidden', // or any element you want to highlight
        description: '<h2>Introduction</h2><p>This is an introductory sentence, which 
                      tells you a bit about everything.'</p>
        showSkip: false,
        showNext: true, // not necessary
        onBeforeStart: function () {
            $('#enjoyhint_arrpw_line').hide();
        }
    },
    {
        ...rest of step 2...
    }
    ...rest of steps...
];

Answer 2

HTML

<div class="hidden"></div>

JS

var enjoyhint_script_steps = [
    {
        'click .hidden': '<h2>Introduction</h2><p>This is an introductory sentence, which tells you a bit about everything.</p>',
        showSkip: false,
        showNext: true,
        margin: 0,
        onBeforeStart: function () {
            document.getElementsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'none';
        }
    },
    {
        onBeforeStart: function () {
             document.getElmentsByClassName('enjoyhint_svg_wrapper')[0].style.display = 'block';
        },
        ...rest of step 2...
    }
    ...rest of steps...
];

Пояснение

<div class="hidden"></div> пустой элемент для EnjoyHint.

'click .hidden': '...description...' нацеливается на пустой элемент и добавляет описание.

showSkip: false скрывает кнопку пропуска.

showNext: true показывает следующая кнопка.

margin: 0 скрывает область, выделенную EnjoyHint.

onBeforeStart: function () {...} используется, чтобы скрыть стрелку на первом шаге и показать ее на втором шаге.