html - 如何实施LinkedIn Hopscotch

Question

我想知道如何实现一个简单的 LinkedIn HopScotch。

我试图实施，但未能成功。

以下是我尝试的实现；

<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>

我应该根据旅游对象添加一个<div>带有 id 的对象吗？hello-hopscotch

http://cdnjs.com/libraries/hopscotch是我的图书馆的来源；我已经实现hopscotch.min.css和hopscotch.min.js.

我做错了什么，我该如何解决？

Answer 1

实际上，您已将位置设置为“正确”，这很好，但它正在显示屏幕外的步骤。因为 step 显示在元素的右侧，恰好是块元素。将其切换到底部，您将看到该项目。

您可以根据文档配置放置。

Answer 2

正如我从前一天开始使用此插件时所知道的，如果未找到您定位的元素，则 hopscotch 将不会呈现。如果你的 target 是一个带有 Id 的元素，你只需要用 " #" 来设置 target。