1

我是 Bootstrap 的新手，我已经开始使用一个名为 Bootstrap Tour 的插件。http://bootstraptour.com/

我今天刚开始学习数据属性，我想知道我是否可以/应该将它们与 Bootstrap Tour 一起使用。Bootstrap tour 是包含的弹出框和工具提示插件的组合。

例如，游览有步骤，步骤具有可以在启动游览时设置的属性。我试图能够从 HTML 元素中设置位置、标题和内容。

var tour = new Tour();

tour.addSteps([
  {
    element: ".completed-range",
    title: "",
    content: ""
  },
  {
    element: ".fph-row h1",
    placement: 100,
    title: "Welcome to the <b>" + sectionTitle +"</b> tour!" ,
    content: "Proceed to discover this section's features."
  }

]);

上面的代码创建了一个包含 2 个步骤的游览。第一步以“完成范围”类的元素为目标。在我的 HTML 中，我想设置显示在步骤的弹出框/工具提示中的位置、标题和内容。像这样：

<div class="completed-range" data-placement="top" data-title="Setting Title" data-content="My Content">

上面的 div 填充了我想要的内容，但是位置和标题不起作用。如果我使用 data-toggle="popover" 或 data-toggle="tooltip" 零碎按我想要的方式工作，但不是 Tour 插件的全部内容。谁能指出我正确的方向？

4

1 回答 1

1

好吧，在我写完问题之后，我几乎直接找到了一半的答案。所以， 

 {
    element: ".completed-range",
    title: "Logout",
    placement: $(".completed-range").data("placement"), 
    content: ""
  },

我可以注入构造函数，就像我对放置属性所做的那样。然后，

<div class="completed-range" data-placement="top" data-content="testing content" data-original-title="Title from HTML">

将读取我的“位置”值。不过，我喜欢这两种方式——当我在 HTML 中指定 data-content="whatever my content is" 时，data-content 值会覆盖我在构造函数中的值。我喜欢那个。嗯嗯嗯。

我读到关于注入构造函数的 github convo

于 2015-04-29T17:22:12.363 回答