Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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...
Explanation
<div class="hidden"></div> is an empty element for EnjoyHint to target.
'click .hidden': '...description...' targets the empty element and adds a description.
showSkip: false hides the skip button.
showNext: true shows the next button.
margin: 0 hides the area highlighted by EnjoyHint.
onBeforeStart: function () {...} is used to hide the arrow in the first step and show it in the second step.
                Thanks very much. I find that I have to be careful where I place the empty element, as the placement of the text depends on it. Also an arrow to it appears for an instant when the user clicks "Next". But it's more or less there.
– Arbu
                May 26, 2020 at 16:24
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...
Explanation
There is a better solution then target to a hidden div, when assigning the 'click' event.
The 'click' event expects the user to click on the highlithed element in order to move on to the next step and when your element is hidden you cannot click on it.
In order to have 'Next' button by default and target the user to click on it you need to use the 'next' event.
The onBeforeStart gives you the option to run any function you want just before this specific hint starts, so you can run:
function () {
    $('#enjoyhint_arrpw_line').hide();
Inside the onBeforeStart.
When you do it like that you can highlight any element on page without an arrow and have a mandatory 'Next' button.
You can also write it that way if it's more readable:
    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...
You can make div class="hidden" and make arrow transparent
let enjoyhint_script_steps = [
                'click .hidden': '<h2>Hello</h2>',
                arrowColor:'transparent'
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.