tooltips of selected elements in select2 component
Asked Answered
G

1

6

In my project I'm using select2 component. To my selected elements I added icon and description. Code is 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 to be only substring of format option element. I mean I need only beginning of the tooltip not this whole syntax with html inside. Thanks in advance for any help.

Gaeta answered 5/9, 2014 at 13:36 Comment(0)
C
2

Add these 2 parameters in the select2 constructor :

formatResult: format,
formatSelection: format

And then define the format function like below outside the select2 constructor:

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

Original post is here

Craps answered 25/6, 2015 at 6:17 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.