I cannot change the title attribute

Question

Can anyone tell me whats wrong with this function? Everything works as it should right up until i try to change the title attribute, last line. It does not change and has the original value. Im using the title attr as a notification on mouse over

P.S. Javascript/jQuery is not my strong point im a C# developer so please be nice.

function doAlerts(serverDateTime)
{
$('.alertText').each(function()
{
    var getCell = $(this).find("td").eq(0).html()

    var respCount = $(this).find(".messageCount").val();
    var callerId = $(this).find(".messageCallerID").val();
    var getTitleText = $(this).attr('title');

    //get date and title from row off page
    var createDate = $(this).find('.createdDate').html();
    var titleText = $(this).attr('title').replace('Expected SLA : ', '').replace('Expected Response : ', '');
    var title = "Ticket No : " + getCell + "<br>" + getTitleText.replace(' - ','<br>') + "<br>";

    var slaResult = warning(titleText, serverDateTime, 20, "SLA");
    var expResult = warning(titleText, serverDateTime, 60, "Exp");

    if(slaResult)
    {
        $(this).addClass('warning');
        $(".warning").css("background-color", "#FFdddd");
        title = title + "<br>There is less than 20mins before expected 4 hour SLA.<br>";
    }
    if(expResult)
    {
        $(this).addClass('warning');
        $(".warning").css("background-color", "#FFdddd");
        title = title + "<br>There is less than 60mins before expected 24 hour response.<br>";
    }
    if(respCount)
    {
        if(respCount > 5)
        {
            $(this).addClass('warning');
            $(".warning").css("background-color", "#FFdddd");
            title = title + "<br>There has been " + respCount + "messages. A phone call is required to the client<br>";
        }
    }
    $(this).attr("title", title);
});

}

Answer 1

You are not allowed to use html (<br>) text in an attribute. Only plain text is allowed.

Answer 2

If you want line breaks in a title attribute, you need to use the CR/LF ASCII characters rather than <br /> elements.

Answer 3

You could mimic PHP's htmlentities() function with a little javascript:

$(this).attr('title', htmlentities(title));

function htmlentities (string, quote_style) {
    // http://kevin.vanzonneveld.net
    // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +    revised by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +   improved by: nobbler
    // +    tweaked by: Jack
    // +   bugfixed by: Onno Marsman
    // +    revised by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
    // +    bugfixed by: Brett Zamir (http://brett-zamir.me)
    // +      input by: Ratheous
    // -    depends on: get_html_translation_table
    // *     example 1: htmlentities('Kevin & van Zonneveld');
    // *     returns 1: 'Kevin & van Zonneveld'
    // *     example 2: htmlentities("foo'bar","ENT_QUOTES");
    // *     returns 2: 'foo'bar'

    var hash_map = {}, symbol = '', tmp_str = '', entity = '';
    tmp_str = string.toString();

    if (false === (hash_map = this.get_html_translation_table('HTML_ENTITIES', quote_style))) {
        return false;
    }
    hash_map["'"] = ''';
    for (symbol in hash_map) {
        entity = hash_map[symbol];
        tmp_str = tmp_str.split(symbol).join(entity);
    }

    return tmp_str;
}

SOURCE: http://github.com/kvz/phpjs/raw/master/functions/strings/htmlentities.js