Bootstrap Tour插件的Bootstrap数据属性

Question

我是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."
  }

]);

上面的代码创建了一个包含两个步骤的浏览。第一步以类为“completed-range”的元素为目标。在我的HTML中，我想设置在步骤的弹出/工具提示中显示的位置、标题和内容。如下所示：

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

上面的div按照我想要的方式填充内容，但是位置和标题不起作用。如果我使用data-toggle="popover“或data-toggle="tooltip”部分内容，但不是Tour插件的全部内容，它们就会按我希望的方式工作。有谁能给我指个方向吗？

Answer 1

嗯，差不多在我写完问题之后，我就找到了一半的答案。所以,

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

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

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

将读取我的“位置”值。不过，我喜欢这两种方式--当我在HTML中指定data-content =“不管我的内容是什么”时，data- content值覆盖了我的构造函数中的值。我喜欢这样。嗯哦好吧。

The github convo where I read about injecting the constructor