Displaying a Tooltip when Mouseover, fired by an Input

Question

i want to create a tooltip, which is displayed when a user focuses the input. The tooltip will then show items related to the text the user types. But when the user clicks on the items in the tooltip, unfocus will fire and the tooltip will hide. Thats what i got so far, but it is not quite what i want. I want a tooltip which is displayed as long as the input is focused or the user hovers the tooltip. And there is where my problems start.

First of all here is my 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>

When I use .hover() on tooltip, it will dissappear as soon as the user hovers a item. If I user .hover() on item it will dissappear when the mouse is between the items.

Sites like THIS show a good example for what I want to have.

Answer 1

Okay, I've updated this answer. The tooltip now appears when you focus/click on the input field. You can click any item in the tooltip and it'll not disappear. When you remove your mouse from the tooltip, it'll disappear.

I think that's what you wanted.

$("#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>