D3 Bootstrap Tests

HTML

<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//rawgit.com/turban/d3.slider/master/d3.slider.js"></script>
<link rel="stylesheet" href="//rawgit.com/turban/d3.slider/master/d3.slider.css">
<script src="//rawgit.com/shawnbot/d3-bootstrap/master/d3-bootstrap.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="container">
  <div id="testSlider"></div><br><br>
<div>
<select name="" id="">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
</select>
</div>
      <h1>popovers</h1>
      <p>This
      <a class="btn pop" data-placement="bottom" title="Paragraph" data-content="the word paragraph">paragraph</a>
     All works fine but the problem is the content available in data-content not displayed with the spaces....It removes all the new lines and show it in the single line ....How can i overcome this....


      <a class="btn btn-default pop" data-placement="top" data-html="true" title="Popover" data-content="the word &lt;popover&gt;">popover</a>
      in it. You can put them
      <a class="btn pop" data-placement="left" title="Left" data-content="look over here!">on the left</a>
      or 
      <a class="btn pop" data-placement="right" title="Right" data-content="look over there!">on the right</a>, too.
      </p>
 </div

CSS

.container{
  margin-top: 30px;
}
#testSlider {
  width: 200px;
}
.d3-slider{
  font-size: 0.7em;
  border: none;
  background: #eee;
}

.d3-slider text {
  font-size: 1.5em;
  font-family: "Helvetica";
}

CoffeeScript

myslider = d3.slider()
  .axis(true)
  .value(25)
  .margin(20)

    
slider = d3.select("#testSlider")
  .call(myslider)
    
    
popover = bootstrap.popover()
   .title( -> @getAttribute("title") || "")
   .placement(-> @getAttribute("data-placement"))

d3.selectAll("a.pop")
  .call(popover);