title: How to disable the title in select2
body: <p>I've a select2 dropdown which looks like this :</p>
  
  <pre><code>    $(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);
      });
  });
  </code></pre>
  
  <p>It gets it's values from my Model in html:</p>
  
  <pre><code>&lt;select class="js-data-example-ajax" aria-expanded="true" style="width: 100%; display: none;" id="itemSelect"&gt;
  &lt;option disabled selected value="-1"&gt; Search by item &lt;/option&gt;
  @foreach (var item in Model)
  {
      &lt;option text="@item.Id" title="@item.Id"&gt;
          item.Name
      &lt;/option&gt;
  }
  </code></pre>
  
  <p></p>
  
  <p>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!</p>
  
  <p><a href="https://i.stack.imgur.com/LOOJr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/LOOJr.png" alt="enter image description here"></a></p>
  
  <p>In the picture you see the dropdown and the item number which appears when I hover over "Ice Tea"</p>
  
  <p>I know it's because select2 gets the id by <code>var id = e.params.data.title;</code>, but how can I change this? 
  It's not working with  <code>var id = e.params.data.id;</code></p>
  
  <p>I tried to use tooltip, but I'm new to this.</p>
  
  <pre><code>//$("#select2-itemSelect-container").tooltip({
  //    title: "Search item",
  
  //    placement: "auto"
  //});
  </code></pre>
  
  <p>I just want to get rid of the ID in the dropdown while hover over. 
  Every help is appreciated.</p>