Select2 v4.0 remove "title" attributte
Select2 v4.0 remove "title" attribute from the rendered selection
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.css">
<div>
<label>Single select box</label>
<select class="js-source-states">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option...
CSS
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 12px;
}
div {
padding: 50px 75px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
select {
width: 300px;
}
JavaScript
;(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');
}
};
})(window.jQuery);
$(document).ready(function() {
$(".js-source-states, .js-example-basic-multiple").select2({
placeholder: "Select a state",
selectionTitleAttribute: false
});
});