How to disable the title in select2

Question

I've a select2 dropdown which looks like this :

    $(function () {
  $("#itemSelect").select2().on("select2:select", function (e) {
   $("#itemSelect").val(-1).trigger("change");
        var id = e.params.data.title;
        var url = siteRoot + "/site/item?itemID=" + id ;
        $("#Container").load(url);
    });
});

It gets it's values from my Model in html:

<select class="js-data-example-ajax" aria-expanded="true" style="width: 100%; display: none;" id="itemSelect">
<option disabled selected value="-1"> Search by item </option>
@foreach (var item in Model)
{
    <option text="@item.Id" title="@item.Id">
        item.Name
    </option>
}

Everything works fine, EXCEPT when I choose an item and it's loaded, I can hover over the dropdown and it shows me the ID from the item. I don't want to show the ID!

In the picture you see the dropdown and the item number which appears when I hover over "Ice Tea"

I know it's because select2 gets the id by var id = e.params.data.title;, but how can I change this? It's not working with var id = e.params.data.id;

I tried to use tooltip, but I'm new to this.

//$("#select2-itemSelect-container").tooltip({
//    title: "Search item",

//    placement: "auto"
//});

I just want to get rid of the ID in the dropdown while hover over. Every help is appreciated.

Answer 1

The problem can be reproduced in Select2 v4 by placing the mouse over the select box (in single selection mode) or over the selected tags (in multiple selection mode):

The plugin attaches a title attribute to these elements by default, and there is no configuration option available to disable this behaviour.

I had ended up writing a small extension for the Select2 plugin. I've added a new option, selectionTitleAttribute, which must be set to false to remove the title attribute.

Add the following code right after the plugin's js file:

;(function($) {

  // Extend defaults
  //
  var Defaults = $.fn.select2.amd.require('select2/defaults');

  $.extend(Defaults.defaults, {
    selectionTitleAttribute: true
  });

  // SingleSelection
  //
  var SingleSelection = $.fn.select2.amd.require('select2/selection/single');

  var _updateSingleSelection = SingleSelection.prototype.update;

  SingleSelection.prototype.update = function(data) {

    // invoke parent method
    _updateSingleSelection.apply(this, Array.prototype.slice.apply(arguments));

    var selectionTitleAttribute = this.options.get('selectionTitleAttribute');

    if (selectionTitleAttribute === false) {
      var $rendered = this.$selection.find('.select2-selection__rendered');
      $rendered.removeAttr('title');
    }

  };


  // MultipleSelection
  //
  var MultipleSelection = $.fn.select2.amd.require('select2/selection/multiple');

  var _updateMultipleSelection = MultipleSelection.prototype.update;

  MultipleSelection.prototype.update = function(data) {

    // invoke parent method
    _updateMultipleSelection.apply(this, Array.prototype.slice.apply(arguments));

    var selectionTitleAttribute = this.options.get('selectionTitleAttribute');

    if (selectionTitleAttribute === false) {
      var $rendered = this.$selection.find('.select2-selection__rendered');
      $rendered.find('.select2-selection__choice').removeAttr('title');
      this.$selection.find('.select2-selection__choice__remove').removeAttr('title');
    }

  };

})(window.jQuery);

Usage

Initialize the select2 plugin with the selectionTitleAttribute option set to false:

$("select").select2({
  // other options 
  selectionTitleAttribute: false
});

Demo

Fiddle: http://jsfiddle.net/hr8bqnpn/