Подсказки ТОЛЬКО для длинного предложения

Question

У меня есть раскрывающееся меню UL LI, каждый элемент LI имеет разную длину. Если я выберу LI с длинным предложением, он покажет только часть этого предложения и ... в конце.

Цель: Если выбрано короткое предложение, при наведении на него подсказка не будет отображаться. Если я выберу длинное предложение, то при наведении на него всплывающая подсказка покажет полное имя.

Проблема : Если я выберу длинное предложение, я наведу на него всплывающую подсказку. Полное имя, ТОГДА я выбираю короткое предложение, оно не должно показывать всплывающую подсказку, но оно всплывает, подсказка показывает предыдущее длинное предложение с только что выбранным.

Пожалуйста, помогите.

$(document).on("click", '.list-unstyled li', function() {
  var textString = $(this).html();
  var textLength = $(this).text().length
  console.log("This : " + textString);
  console.log('length: ' + textLength);
  $(document).on('mouseenter', '.list-unstyled', function() {
    if (textLength > 30) {
      $('.textBox').html(textString).show();
    } else {}

  });
  $(document).on('mouseleave', '.list-unstyled', function() {
    $('.textBox').hide();
  });
});



$("ul").on("click", ".init", function() {
  $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
  allOptions.removeClass('selected');
  $(this).addClass('selected');
  $("ul").children('.init').html($(this).html());
  allOptions.toggle();
});

body {
  padding: 30px;
}

ul {
  height: 30px;
  width: 150px;
  border: 1px #000 solid;
}

ul li {
  padding: 5px 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  z-index: 2;
}

ul li:not(.init) {
  float: left;
  width: 130px;
  display: none;
  background: #ddd;
}

ul li:not(.init):hover,
ul li.selected:not(.init) {
  background: #09f;
}

li.init {
  cursor: pointer;
}

a#submit {
  z-index: 1;
}

.textBox {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textBox"></div>
<ul class="list-unstyled">
  <li class="init">[SELECT]</li>
  <li data-value="value 1">Sentence 1</li>
  <li data-value="value 2">Sentence 2</li>
  <li data-value="value 3">This sentence is longer than 30 characters</li>
  <li data-value="value 3">This is another sentence longer than 30 characters</li>
</ul>