0

I would like to know how to implement a simple LinkedIn HopScotch.

I tried to implement, but was unsuccessful in getting it done.

Below is my attempted implementation;

<h1 id="header">My First Hopscotch Tour</h1>
<div id="content">
    <p>Content goes here...</p>
</div>
<button id="myBtn">Click Me</button>

<script>
    var tour = {
    id: "hello-hopscotch",
    steps: [
        {
            title: "My Header",
            content: "This is the header of my page.",
            target: "header",
            placement: "right"
        },
    ]
};
$("#myBtn").click(function() {
    hopscotch.startTour(tour);
});
</script>

Should I add a <div> with an id as hello-hopscotch as per tour object?

http://cdnjs.com/libraries/hopscotch is the source of my libraries; I've implemented hopscotch.min.css and hopscotch.min.js.

What am I doing wrong and how can I fix it?

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59
user3556610
  • 151
  • 1
  • 1
  • 6

2 Answers2

1

Actually, you have set the placement to the "right" which is fine, but it is displaying the step off the screen. Because the step is displayed to the right of the element, which happens to be a block element. Switch it to bottom and you will see the item.

You can configure the placement per the documentation.

user2602665
  • 26
  • 1
0

As I know from last day I've started with this plugin, hopscotch will not render if element that you targeted not found. If your target is an element with Id, you just need to set target with "#".

fufu
  • 99
  • 3
  • 13