Mouse hover of selected drop down option not showing any text

#1

I have the following code snippet and I wanted to show a text on mouse hove of the selected value from the drop down . Currently when I mouse hove the selected value in the text box nothing is showing. I want to show the full text(${dataset.name}-${dataset.description}) when mouse hover. Selected value is only showing the first part(${dataset.name})

In JS
//Setting default configuration here or you can set through configuration object as seen below
$.fn.select2.defaults = $.extend($.fn.select2.defaults, {
allowClear : true, // Adds X image to clear select
closeOnSelect : false, // Only applies to multiple selects. Closes the select upon selection.
placeholder : ‘Select the dataset’,
minimumResultsForSearch : 15, // Removes search when there are 15 or fewer options
formatSelection : customizeSelectedResults
// appearance of selected results can be customized by setting a function to templateSelection configuration option
});

$(document).ready(
function() {
	// Single select example if using params obj or configuration seen above
	var configParamsObj = {
		placeholder : 'Select the dataset',
		allowClear : true,// Place holder text to place in the select
		minimumResultsForSearch : 3
	// Overrides default of 15 set above
	};
	$("#datasets").select2(configParamsObj);

});

//customizing the appearance of selected results for select2
function customizeSelectedResults(state) {
if (!state) {
return state.text;
}

		return state.text.split(' - ')[0];
	};

In html


<c:forEach var=“entry” varStatus=“status” items="${datasetMap}">
<c:set var=“dataset” value="${entry.value}" />
<c:set var=“selected” value="" />
<c:forEach var=“item” items="${selectedDataset}">
<c:if test="${item eq dataset.id}">
<c:set var=“selected” value=“selected” />
</c:if>
</c:forEach>
<option value="${dataset.id},${dataset.name},${dataset.description}" ${selected}>
<c:out value="${dataset.name}-${dataset.description}" />

</c:forEach>

#2

Your customizeSelectedResults() function is returning only the text of the first element in the array created by splitting the state.text value. When you do this, Select2 simply outputs the text, which doesn’t have the ability to display hover text (presumably via the HTML title attribute). Instead of outputting just the text of the first element (i.e., the dataset.name value), you need to output an HTML element (e.g., a <div> or <span> containing the dataset.name value), but also containing a title attribute containing the full state.text value. Then, when the user hovers over the selected item, the value of the title attribute will be displayed as a “tooltip”. Note that your HTML must be wrapped in a jQuery object. See the selection templating documentation for more details, but basically, you want something like the following for your callback:

function customizeSelectedResults(state) {
    if (!state.id) {
        return state.text;
    }
    return $('<span title="' + state.text + '">' + state.text.split(' - ')[0] + '</span>');

If you want a more stylized tooltip/hover text, you can use a data-* attribute (e.g., 'data-hovertext) instead of the titleattribute, and use CSS (and possibly JavaScript, although you can do it purely with CSS, using a::beforeor::afterpseudo-element leveraging the CSScontentproperty) to output thedata-hovertext` value in a styled tooltip or popup.