title: Insert newline into span data-content attribute
body: <p>I have the following html code as part of a new site I am creating...</p>
  
  <pre><code>        &lt;div class="page" id="page-makalu"&gt;
          &lt;header class="bp-header cf"&gt;
              &lt;h1 class="bp-header__title"&gt;Makalu&lt;/h1&gt;
              &lt;span class="bp-tooltip bp-icon bp-icon--about" data-content="How to get there from Londynske Namesti: Do this and then do that and then do this again"&gt;&lt;/span&gt;
          &lt;/header&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>I would like to insert a newline into the "data-content" attribute of the span. After the "Namesti:"</p>
  
  <p>I have tried</p>
  
  <ul>
  <li>using <code>data-html="true"</code> as an attribute and inserting <code>&lt;br/&gt;</code> into the data-content.</li>
  <li>using <code>data-html="true"</code> as an attribute and inserting <code>\A</code> into the data-content.</li>
  <li>Actually splitting the text over newlines in my IDE</li>
  <li>google searches for every combination of "span / data-content / new-line" I could think of</li>
  </ul>
  
  <p>All with no success, Thanks for any help.
  Relevant CSS:</p>
  
  <pre><code>.bp-tooltip:after { 
  font-size: 50%;
   font-size: 75%;
   position: relative;
   top: -8px;
   left: -12px;
   width: 30px;
   height: 30px;
   }
   .bp-tooltip:hover:before {
   content: attr(data-content);
   font-size: 110%;
   font-weight: 700;
   line-height: 1.2;
   position: absolute;
   left: auto;
   margin-left: 4px;
   padding: 0.8em 1em;
   text-align: left;
   text-indent: 0;
   letter-spacing: 0;
   text-transform: none;
   color: #fff;
   background: #5c5edc; 
  }
  
  .bp-header { padding: 6em 10vw 2em; } 
  .bp-header__title { font-size: 2.125em; font-weight: 700; line-height: 1.3; margin: 0; letter-spacing: 2px; text-transform: uppercase; color: #fff; }
  </code></pre>