jQuery tooltip add line break

Question

So, I want to take the content of a div in which I have several <br/>, and then pass it as a title attribute using jQuery tooltip widget. I want the lines to appear one beneath the other inside the tooltip. thx. the code so far is:

CSS

.Lines {
    width: 125px;
    height:20px;
    overflow:auto;
}

JavaScript

$(function () {
    $(document).tooltip();

    $(".Lines").hover(function () {
        IaTxt = $(this).html()

        $(this).prop('title', IaTxt)

    })
});

HTML

<div class="Lines">
    First line.
    <br/>Second line.
    <br/>Third line!
    <br/>Fourth line?
</div>

Answer 1

There's a pure CSS solution. Use \n for newlines, and add this CSS style:

.ui-tooltip {
    white-space: pre-line;
}

You can also use pre or pre-wrap instead of pre-line, if you want to preserve whitespace. See https://developer.mozilla.org/en-US/docs/Web/CSS/white-space