select2 options bootstrap tooltips

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<select name="xxx" class="select-full">
    <option class="option-item" value="1" title="Description one kinda big text here">1</option>
    <option class="option-item" value="2" title="<h3>Some Title</h3><p>Description two kinda big text here Description two kinda big text hereDescription two kinda big text</p>
 here Description two kinda big text hereDescription two kinda big text here Description two kinda big text hereDescription two kinda big text here Description two kinda big text hereDescription two kinda big text here Description two kinda big text hereDescription two kinda big text here Description two kinda big text here">2</option>
</select>

<br/>
<a href="#" class="tip-normal" title="this one works">hover me</a>

JavaScript

$('.tip-normal').tooltip({
    placement: "auto",
    html: true
});

$('select').on('select2:open', function (e) {
    $('.select2-results__option').tooltip({
      placement: "auto",
      html: true
		});
});



$(".select-full").select2({
    width: "50%",
});