Question

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

我刚刚开始学习数据属性，我想知道我是否可以/应该在Bootstrap Tour中使用它们。 Bootstrap tour是包含的popover和tooltip插件的组合。

例如，游览具有步骤，步骤具有可在启动游览时设置的属性。我试图能够从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个步骤的游览。第一步是使用类＆＃34;完成范围的元素。＆＃34;在我的HTML中，我想设置步骤的弹出框/工具提示中显示的展示位置，标题和内容。像这样：

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

上面的div填充了我喜欢的内容，但是展示位置和标题都不起作用。如果我使用data-toggle =＆＃34; popover＆＃34;或数据切换=＆＃34;工具提示＆＃34;点点滴滴按我想要的方式工作，但不是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 =“我的内容是什么”时，数据内容值会覆盖我在构造函数中的内容。我喜欢那个。嗯，好吧。

The github convo where I read about injecting the constructor

Bootstrap Tour插件的Bootstrap数据属性

1 个答案: