title: Bootstrap Data Attributes with Bootstrap Tour Plugin
body: <p>I'm newer to Bootstrap and I've started using a plugin called Bootstrap Tour. <a href="http://bootstraptour.com/" rel="nofollow">http://bootstraptour.com/</a></p>
  
  <p>I just started learning about data-attributes today, and I'm wondering if I can/should use them with Bootstrap Tour. Bootstrap tour is a combo of the included popover and tooltip plugins.</p>
  
  <p>For instance, tours have steps, and steps have attributes that can be set when initiating the tour.  I'm trying to be able to set the placement, title, and content from the HTML element.</p>
  
  <pre><code>var tour = new Tour();
  
  tour.addSteps([
    {
      element: ".completed-range",
      title: "",
      content: ""
    },
    {
      element: ".fph-row h1",
      placement: 100,
      title: "Welcome to the &lt;b&gt;" + sectionTitle +"&lt;/b&gt; tour!" ,
      content: "Proceed to discover this section's features."
    }
  
  ]);
  </code></pre>
  
  <p>The above code creates a tour with 2 steps. The first step targets an element with the class "completed-range." From my HTML, I'd like to set the placement, title, and content that appears in the step's popover/tooltip. Like this:</p>
  
  <pre><code>&lt;div class="completed-range" data-placement="top" data-title="Setting Title" data-content="My Content"&gt;
  </code></pre>
  
  <p>The div above populates the content as I'd like, but placement and title aren't working. If I use data-toggle="popover" or data-toggle="tooltip" bits and pieces work the way I want them to, but not the whole thing for the Tour plugin. Can anyone point me in the right direction?</p>