Tooltips for selected items in select2 component

Question

In my project, I am using the select2 component. I added an icon and description to my selected items. The code looks something like this:

function format(profile_opt) { return profile_opt.text + "<br><span class=\"description_select2\"><i>" + $(profile_opt.element).attr('title') + "</i></span><br>" + ($(profile_opt.element).attr('start').length==0?'':('from: <b>' + $(profile_opt.element).attr('start') + '</b>')) + ($(profile_opt.element).attr('end').length==0?'':(' to: <b>' + $(profile_opt.element).attr('end') + '</b>')) + " <a href=\"#\" onclick=javascript:showUrlInDialogWithOptionId(\"<%=request.getContextPath()%>/assignments_date_set.jsp\",\"" + profile_opt.id + "\",\"" + $(profile_opt.element).attr('start') + "\",\"" + $(profile_opt.element).attr('end') + "\")>" + "<img src=\"images/icons/small/grey/clock.png\" title=\"Set start and end assignment dates\" alt=\"Set start and end assignment dates\" class=\"clock\" id=\"clock\" width=\"20px\" height=\"20px\"></a>"; } function format2(profile_opt){ return profile_opt.text +"<br><span class=\"description_select2\"><i>" + $(profile_opt.element).attr('title') + "</i></span>"; } $('#selected_profiles').select2({ allowSelectAllNone: true, closeOnSelect:false, width: '600px', placeholder: 'Click to select', formatResult: format2, formatSelection: format, escapeMarkup: function(m) { return m; } }); 

My question is: how to set tooltips only by a substring of a format option element. I mean, I only need the beginning of the tooltip, and not all this syntax with html inside. Thanks in advance for any help.

Answer 1

Add these 2 parameters to the select2 constructor:

 formatResult: format, formatSelection: format 

And then define the format function as shown below outside the select2 constructor:

 function format(item) { var originalText = item.text; return "<div title ='" + originalText + "'>" + originalText + "</div>"; } 

Original post here