仅需较长句子的工具提示

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>