Unable to show tooltip on items in dropdown

[sanisagohar]

I want to show tooltip on 'li' tags generated by multiple-select when item text is greater than width of dropdown (I am already truncating text when it is larger than width and showing "... ").

Here is my code:
var $li = $('#ddlBooks').siblings().find(".ms-drop li");
$.each($li, function (i, v) {
if (v.innerText.length > 27)
$(v).attr('title', v.innerText);
});

it does add title attribute in li tag when these lines of code execute but as soon as page completely renders there is no title attribute. Please help me with this.

[wenzhixin]

Here is an example: http://jsfiddle.net/wenyi/knbdm5hu/5/