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.

Tooley

I don't think I understand where the ID is being displayed and in what manner. Could you please post an example or screenshot of the issue. It sounds like you have another script that is showing the ID... – Rumpf

I have posted an answer, but I am not overly confident in it being correct. It might also help to post a jsfiddle if no one else can figure it out. – Rumpf

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.

Maracaibo

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

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

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/

Landel

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

Please submit this to the git. – Crick

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

What version are you using? – Landel

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/

Ned

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

Fetich

Answer 5

hey everyone if you have this problem this simple trick

<script>

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


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

});

Elbertelberta

Answer 6

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

Rumpf

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

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.

Haugen

Answer 8

I trying use this, and it's works :

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

Chacon