Adding CR or LF in HTML attribute

Question

To explain this shortly, I have an mouseenter Jquery event firing up an AJAX call. And a Jquery UI tooltip.

$(function()
{
    $(document).tooltip({track:true});
    $('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});  

Here is the call:

function AJAXValidation(section)
{
    var request = $.ajax(
    {
        url: "ProcessJRT.php",
        type: "POST",
        contentType:"application/x-www-form-urlencoded;charset=UTF-8",
        data:
        {
            validate:section
        }
    });

    request.done(
        function(message)
        {
            var div = document.createElement('div');
            $(div).html(message);
            $(div).children().each
            (
                function(i)
                {
                    var title = '';

                    if($('#' + $(this).attr('id')).attr('title') != null)
                    {
                        title = $('#' + $(this).id).attr('title');
                    }

                    title += $(this).html() + '\r\n';

                    $('#' + $(this).id).attr('title', title);
                }
            );
        });
}

What it does now is it take the <div>s from message and it place them in a parent <div>. (In my code the div already exist, I changed that part so the question would stay as short as possible).

I then take the text from those <div> and I want to place them in the corresponding <input/> title attribute.

Everything work just perfect here exepte this stupid little thing:

I am unable to add a LN or a CR in the title so all the texts from the divs would be on separate line...

I have tried adding a </br> inside the attribute like this:

function(i)
{
    var title = '';

    if($('#' + $(this).id).attr('title') != null)
    {
        title = $('#' + $(this).attr('id')).attr('title');
    }

    title += $(this).html() + '</br>';//<---See I added a BR here 

    $('#' + $(this).id).attr('title', title);
}

But it display the </br> as normal text. I than tried String.fromCharCode(13) but did'nt work, I tried jus '\n' or '\r\n' and still does work.

Can someone point out were I am derping on this one??

Thanks!

EDIT:

Changed the $('#' + $(this).attr('id')) to $('#' + $(this).id).

Answer 1

Here is how I resolve my problem with the idea that @crush gave me:

First:

I removed the tooltip initialization from the function that fire the event :

$(function()
{
    $('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});

Next:

I changed the "done" function so I would initialise a new tooltip each time with html content (FYI JQuery tooltip can format HTML)

Here what it look like now:

function(message)
{
    var div = document.createElement('div');
    $(div).html(message);

    var title = '';

    $(div).children().each
    (
        function(i)
        {
            if($('#' + $(this).id).attr('title') != null)
            {
                title = $('#' + $(this).id).attr('title');
            }

            title += $(this).html() + '</br>';

            $(document).tooltip({content:title, items:('#' + $(this).id)});
        }
    );
}

Answer 2

You can't format the title attribute in that way, it doesn't work, and will be different across different browsers.

Try the jquery plugin qTip to achieve what you want. (looks good too!) http://craigsworks.com/projects/qtip/

Alternatively, you can cheat by using     etc, to push the text to the next line. but this is flaky at best.