如何实施LinkedIn Hopscotch答案

【问题标题】：How to implement LinkedIn Hopscotch如何实施LinkedIn Hopscotch
【发布时间】：2015-07-29 16:38:25
【问题描述】：

我想知道如何实现一个简单的 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>

我应该根据游览对象添加一个 ID 为 hello-hopscotch 的 <div> 吗？

http://cdnjs.com/libraries/hopscotch 是我的库的来源；我已经实现了hopscotch.min.css 和hopscotch.min.js。

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

【问题讨论】：

标签： html hopscotch

【解决方案1】：

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

您可以根据文档配置展示位置。

【讨论】：

【解决方案2】：

我从昨天开始使用这个插件就知道，如果找不到您定位的元素，hopscotch 将不会呈现。如果你的 target 是一个带有 Id 的元素，你只需要设置 target 为“#”。

【讨论】：