鼠标悬停时显示工具提示，由输入触发

Question

我想创建一个工具提示，当用户关注输入时会显示该工具提示。然后，工具提示将显示与用户键入的文本相关的项目。但是当用户点击工具提示中的项目时，会触发 unfocus 并且工具提示会隐藏。这就是我到目前为止所得到的，但这并不是我想要的。我想要一个工具提示，只要输入集中或用户悬停工具提示，它就会显示。这就是我的问题开始的地方。

首先是我的 HTML：

$("#genre input").focus(function(){
  $("#genre #vor .overlay").show();
});

$("#genre input").focusout(function(){
  $("#genre #vor .overlay").hide();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="genres"></div>
<input type="text">
<div id="vor">
  <div class="tooltip">
    <div class="item">
      Some Text
    </div>
  </div>
</div>

当我在工具提示上使用 .hover() 时，一旦用户悬停一个项目，它就会消失。如果我在项目上使用 .hover() ，当鼠标在项目之间时它会消失。

像THIS 这样的网站是我想要拥有的一个很好的例子。

Answer 1

好的，我已经更新了这个答案。现在，当您聚焦/单击输入字段时会出现工具提示。您可以单击工具提示中的任何项目，它不会消失。当您从工具提示中移除鼠标时，它会消失。

我想这就是你想要的。

$("#genre input").click(function(){
    $("#genre #vor .overlay").show();
});

$(".overlay").mouseover(function() {
    $("#genre #vor .overlay").show();
});

$(".overlay").mouseout(function() {
    $("#genre #vor .overlay").hide();
});

/*$("#genre input").keyup(function (){
    //For Testing
var text = $(this).val();
    $("#genre #vor .overlay").html($('<div id="item">'+text+'</div>').click(function(){
  $("#genres").append("<span>"+text+'</span>');
    }));
});*/

.overlay::before {
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  border-top-width: 0;
  content: "";
  display: inline-block;
  left: 10px;
  position: absolute;
  top: -5px;
  z-index: 101;
}

.overlay::after {
  border: 7px solid transparent;
  border-bottom-color: #CCC;
  border-top-width: 0;
  content: "";
  display: inline-block;
  left: 9px;
  position: absolute;
  top: -7px;
  z-index: 100;
}

.overlay {
  border: 1px solid #CCC;
  display: none;
  float: left;
  padding: 5px 10px 5px 10px;
  min-width: 25px;
  position: absolute;
  z-index: 200;
  box-shadow: 2px 2px 10px 0 rgba(0,0,0,0.2);
  border-radius: 5px;
  top:4px;
  left: 5px;
}

#vor {
  position: relative;
  height: 0px;
}

#item {
  background-color: #474747;
  padding: 2.5px 10px 2.5px 10px;
  border-radius: 8px;
  margin: 3px 0px 0px 0px;
  color:#FFF;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="genre">
    <div id="genres"></div>
  <input type="text"></input>
    <div id="vor">
        <div class="overlay">
            <a class="clickItem" href="javascript:void(0)">Item 1</a><br />
            <a class="clickItem" href="javascript:void(0)">Item 2</a><br />
            <a class="clickItem" href="javascript:void(0)">Item 3</a>
        </div>
    </div>
</div>