用于添加气球的 Javascript 库，其中包含指向所需输入控件的消息

Question

当我的网页加载时，应该提示用户按顺序做出一些选择。

我希望弹出消息气球，其中包含诸如“嘿，既然您选择了所在国家/地区，现在选择省份”之类的消息。这些气球还应该指向特定的选择控件。

请注意，这些气球应该出现在某些方法调用上，这将使它们活跃起来，而不是像工具提示那样悬停时出现

有任何建议欢迎提出

Answer 1

看看这个插件： http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

我不确定你的 html 结构，但这就是你所做的。在您的 html 中，您希望“气球”出现的每个位置都需要指定一个锚点 ID。

（示例取自官方文档）

例如，如果您想要一个“气球”在 href, ， 然后：

/* Joyride can be attached to any element with a unique ID or class, in any order */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

设置锚点后，您需要定义气球的外观。对于每一个 anchor id 你应该指定 data-attribute 使用该 id，如果未指定，则气球将附加到 body 元素。研究下面的例子：

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="chooseID">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

然后你需要添加一些 javascript magic start 以使一切正常工作：

/* Launching joyride when to page is loaded */

<script>
$(window).load(function() {
  $("#chooseID").joyride({
    /* Options will go here */
  });
});
</script>

您可以设置一些选项，请查看上面的链接。