使用 Bootstrap Tour 插件的 Bootstrap 数据属性

Posted 2023-02-24

【中文标题】使用 Bootstrap Tour 插件的 Bootstrap 数据属性

【英文标题】：Bootstrap Data Attributes with Bootstrap Tour Plugin

【发布时间】：2015-07-09 02:38:45

【问题描述】：

我是 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 插件的全部。谁能指出我正确的方向？

【参考方案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 值会覆盖我在构造函数中的值。我喜欢那个。嗯嗯嗯。

The github convo where I read about injecting the constructor