Insert newline into span data-content attribute

Question

I have the following html code as part of a new site I am creating...

        <div class="page" id="page-makalu">
        <header class="bp-header cf">
            <h1 class="bp-header__title">Makalu</h1>
            <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"></span>
        </header>
        </div>

I would like to insert a newline into the "data-content" attribute of the span. After the "Namesti:"

I have tried

• using data-html="true" as an attribute and inserting <br/> into the data-content.
• using data-html="true" as an attribute and inserting \A into the data-content.
• Actually splitting the text over newlines in my IDE
• google searches for every combination of "span / data-content / new-line" I could think of

All with no success, Thanks for any help. Relevant CSS:

.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; }