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

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.

Answer 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/

Answer 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/

Answer 4

hey everyone if you have this problem this simple trick

<script>

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


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

});

Answer 5

Try disabling the tooltip for the created select2.

$(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);
    }).tooltip('disable');
});

Answer 6

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');
    });

Answer 7

Unfortuntely I didn't have any luck with the above solutions, possibly because this project uses bootstrap and Select2 was utilising bootstrap tooltips, which look different and fade in.

In this case, upon mouseover, Select2 would actually remove the title attribute, replacing it with aria-describedby which contained an id of a newly-created toolip element. On mouseleave, aria-describedby was removed and the title attribute restored again.

So trying to remove the title attribute didn't work, as it had already been removed, and then it was restored again on mouseleave. So this did the trick for me:

$(document).on('mouseenter', '.select2-selection__rendered', function () {
  var tooltipId = $(this).attr("aria-describedby"); // contains the id of the tooltip
  $("#" + tooltipId).hide(); // hide the tooltip before it fades in
  $(this).unbind('mouseenter mouseleave'); // stop it showing another tooltip
});

The above code doesn't prevent Select2 from attempting to show a tooltip the first time the mouse hovers over it, but .hide() successfully prevents it being shown before it starts to fade in. After that, unbinding the hover stops Select2 from trying to show any more of them.

Answer 8

I trying use this, and it's works :

        $(document).on('mouseenter', '.select2-selection__rendered', function () {
            $('.select2-selection__rendered').removeAttr('title');
        });

Answer 9

You can simply comment these couple of lines in your select2 script

//$rendered.attr('title', selection.title || selection.text);
//$selection.attr('title', selection.title || selection.text);

This won't add the title attribute at the first place