title: Simple html and css tooltip with newline/carriage return
body: <p>I stumbled on a simple wonderful tooltip(<a href="http://cbracco.me/a-simple-css-tooltip/" rel="nofollow noreferrer">http://cbracco.me/a-simple-css-tooltip/</a>) but I'm unable to add a new line/ carriage return when I use it.
  I have tried <br />
  &amp;013;
   &#13;
   \n
  but no success so far. I have also tried using the html inbuilt tooltip but it looks ugly in firefox. </p>
  
  <p>Tooltip on hover:</p>
  
  <p>Sentence one here. Sentence</p>
  
  <p>two here. Sentence three here.</p>
  
  <p>What I'm trying to output on hover:</p>
  
  <p>Sentence one here.<br>
  Sentence two here.<br>
  Sentence three here.</p>
  
  <pre><code>&lt;style&gt;
  /* Some basic styles */
  *,
  *:before,
  *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  }
  
  a:hover {
  text-decoration: none;
  }
  
  /* Add this attribute to the element that needs a tooltip */
  [data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
  }
  
  /* Hide the tooltip content by default */
  [data-tooltip]:before,
  [data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
  }
  
  /* Position tooltip above the element */
  [data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius:    3px;
  border-radius:         3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
  }
  
  /* Triangle hack to make tooltip look like a speech bubble */
  [data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
  }
  
  /* Show tooltip content on hover */
  [data-tooltip]:hover:before,
  [data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  }
  
  &lt;/style&gt; 
  
  &lt;a href="#" data-tooltip ="Sentence one here.
  Sentence two here. 
  Sentence three here."&gt;Click for more details&lt;/a&gt;
  </code></pre>