JavaScript/jQuery: Show DIV until user stops typing in Textbox -

i use few textboxes on website (input type=text) , have 1 div, hidden (display: none).

now i'd user enter text in 1 of textboxes , @ moment, div should appear few seconds , hide, when user stops adding text. div should wait until user stops hovering div. tried hard couldn't done correctly.

here jsfiddle-example show mean:

var infoboxhovered = false;    $(".textbox1").on("input", function() {      $(".infobox").fadein();      settimeout(function () {          $(".infobox").fadeout();      }, 3000);   });    $(".textbox2").on("input", function() {      $(".infobox").fadein();      if (!infoboxhovered){          settimeout(function () {              $(".infobox").fadeout();          }, 3000);      }   });    $(".infobox").mouseenter(function(){      infoboxhovered = true;  })  $(".infobox").mouseleave(function(){      infoboxhovered = false;  })    // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - //    //the infobox-div should appear, when user enters text  //the infobox-div should disappear, 3 seconds after user stopped entering text  //the infobox-div should not disappear after 3 seconds , appear again - should stay until user finished entering text , wait 3 seconds before fades out  //the infobox-div should visible, long user hovers div , should fade out, if 3 seconds over

.main{      background-color: lightgrey; min-width: 100%; min-height: 200px; text-align: center;  }  .header{      font-family: arial; color: red; font-size: 18px; font-weight: bold;  }  .infobox{      position: fixed; left:0; right:0;background: rgba(0,0,0,.75); z-index: 20; bottom: 20px;      margin: 0 auto; width: 500px; height: 80px; border-radius: 4px; text-align: center;      color: white; padding: 15px; font-family: arial; display: none;  }

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>  <div class="main">      <br/>      <span class="header">input-fields</span>      <br/><br/>      <input type="text" name="title1" placeholder="enter text" class="textbox textbox1"/>      <input type="text" name="titlew" placeholder="enter text" class="textbox textbox2"/>  </div>    <div class="infobox">      information  </div>

i tried best different functions "delay" or "settimeout" or check every few seconds "setinterval"... nothing worked. tried explain few more details in javascript-field in jsfiddle.

thanks in advance.

all have store settimeout in variable, clear timeout when needed:

replaced mouseenter hover, work either way.

note
.infobox element invisible, when appears under mouse pointer, not hovered until mouse pointer gets moved.

// declare timer variable holds timeout:  var timer;    $(".textbox1").on("input", function() {      $(".infobox").fadein();      // clear timer if it's set:      cleartimeout(timer);      timer = settimeout(function () {          $(".infobox").fadeout();      }, 3000);   });    $(".textbox2").on("input", function() {      $(".infobox").fadein();      // clear timer if it's set:      cleartimeout(timer);      timer = settimeout(function () {          $(".infobox").fadeout();      }, 3000);   });    $(".infobox").hover(function(){      // clear timer on hover, box won't disapear:      cleartimeout(timer);  }, function(){      // set timer again when mouse outside of box:      timer = settimeout(function () {          $(".infobox").fadeout();      }, 3000);  });

.main{      background-color: lightgrey; min-width: 100%; min-height: 200px; text-align: center;  }  .header{      font-family: arial; color: red; font-size: 18px; font-weight: bold;  }  .infobox:hover{      background: rgba(0,0,0,.9);  }  .infobox{      position: fixed; left:0; right:0;background: rgba(0,0,0,.75); z-index: 20; bottom: 20px;      margin: 0 auto; width: 500px; height: 80px; border-radius: 4px; text-align: center;      color: white; padding: 15px; font-family: arial; display: none;  }

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>  <div class="main">      <br/>      <span class="header">input-fields</span>      <br/><br/>      <input type="text" name="title1" placeholder="enter text" class="textbox textbox1"/>      <input type="text" name="titlew" placeholder="enter text" class="textbox textbox2"/>  </div>    <div class="infobox">      information  </div>