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.

Solution 1

I might be a bit late, but non of this solutions worked for me since I was dynamically adding select2 fields to UI.

This code did the trick for me:

$('.select2-selection__rendered').hover(function () {
    $(this).removeAttr('title');
});

If you are also dynamically adding select2 fields don't forget always to execute this code before above one:

$('.select2-selection__rendered').unbind('mouseenter mouseleave');

This code will first remove on hover listener on all select2 fields.

Solution 2

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/

Solution 3

You can use events to remove title tag.

For example, this code works with select2 v4.0:

$('select').on('change', function (evt) {
    $('.select2-selection__rendered').removeAttr('title');
});

http://jsfiddle.net/by8k1dv9/

Solution 4

After initializing select2, use below line of code to remove title attribute from select2 options from code. remove ` sign then put in your script file

   $("ul.select2-selection__rendered").hover(function(){
      $(this).find('li').removeAttr('title');
    });

Solution 5

hey everyone if you have this problem this simple trick

<script>

$(document).on('mouseenter', '.select2-selection__rendered',  function () {


    $(this).removeAttr("title");

});

View more solutions

Comments

[CzechErface]

Could you please provide a JSFiddle with the issue? I feel like I am overlooking something since I cannot replicate the behavior.

[Victorio Berra]

Can you possibly submit this as a PR for Select2? Looks like there is a help-wanted github.com/select2/select2/pull/3988

[Ján Janočko]

Or simply do it for whole document and all .select2-selection__rendered elements that may appear anytime with $(document).on('mouseenter', '.select2-selection__rendered', function () { $(this).removeAttr('title'); });

[erosebe]

Please submit this to the git.

[Guillaume]

I added "this.$selection.find('.select2-selection__choice__remove').‌​removeAttr('title');‌​" In the multipleSelection part, to remove the "Remove" title on the button.

[andreivictor]

What version are you using?

[Jatin Mandanka]

@JánJanočko Works fine with you code also.