Simple html and css tooltip with newline/carriage return

Question

I stumbled on a simple wonderful tooltip(http://cbracco.me/a-simple-css-tooltip/) but I'm unable to add a new line/ carriage return when I use it. I have tried
&013; \n but no success so far. I have also tried using the html inbuilt tooltip but it looks ugly in firefox.

Tooltip on hover:

Sentence one here. Sentence

two here. Sentence three here.

What I'm trying to output on hover:

Sentence one here.
Sentence two here.
Sentence three here.

<style>
/* 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;
}

</style> 

<a href="#" data-tooltip ="Sentence one here.
Sentence two here. 
Sentence three here.">Click for more details</a>

Answer 1

You can

EDIT: This corrects my previous answer that said you can't.

Because your CSS uses content: attr() to get the text inside a specified attribute, you can use an HTML entity code such as 
 to insert a newline.

Inserting a newline via an HTML entity code:

Note: You must set display: block and white-space: pre|pre-line|pre-wrap for the newline to display.

[data-tooltip] {
    cursor: default;
    font: normal 1em sans-serif;
}

[data-tooltip]:hover:after {
    display: inline-block;
    content: attr(data-tooltip);
    white-space: pre-wrap;
    color: Tomato;
    background-color: OldLace;
    padding: 1em;
}

<span data-tooltip="Sentence one here. Sentence&#xa;two here. Sentence three here.">See my CSS tooltip with HTML-entity &amp;#xa; line break:</span>

---

This was also answered here: CSS data attribute new line character & pseudo-element content value

Answer 2

Try finishing the line with a full stop (period) and begin the next line with a space. I think you will find that works

UPDATE

There is still some debate about this working. Are the lines being pushed down because they are too long? The answer is NO they are not.

As you can see in the above image. The very long line (line 1) is split. However, the smaller lines (line 2 and 3) are still placed on new lines and they are not long enough to be wrapped.

FINAL UPDATE SOLVED

As you can see this now works properly

This is the code to write the tooltip properly

<a href="#" title ="Sentence
                          one here. Sentence two here. 
                          Sentence
                          three 
                          here.">Click for more details</a>

Each new line = a new line in the tooltip. use "title" and not data-tooltip.