如何将setTimeout添加到悬停函数？

Question

我发现这种效果要等几秒钟才能隐藏内容。

var timeout;

function hide() {
    timeout = setTimeout(function () {
        $("#tooltip").hide('fast');
    }, 500);
};

$("#tip").mouseover(function () {
    clearTimeout(timeout);
    $("#tooltip").stop().show('fast');
}).mouseout(hide);

$("#tooltip").mouseover(function () {
    clearTimeout(timeout);
}).mouseout(hide);

div { 
    display: none; 
    background-color: 'yellow';
    border: 1px solid black;
    width: 100px;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="tip" href="#">Tooltip</a>
<div id="tooltip">Tootlip contents</div>

我正在尝试将该功能添加到以下代码中：

$(document).ready(function(){
  $("#myvid").hover(function(){
    // Show our tooltip on hover
    $(".tooltip").show();
  }, function(){
    // Hide our tooltip
    $(".tooltip").hide();
  })
});

我是这样做的：但是它不起作用：（

$(document).ready(function(){
    var timeout;

    fuction hide() {
        timeout = setTimeout(function () {
            $("#tooltip").hide('fast');
        }, 500);
    };

  $("#myvid").hover(function(){
    clearTimeout(timeout);
    // Show our tooltip on hover
    //$(".tooltip").show();
    $(".tooltip").stop().show('fast');
  }).hover(hide);
    // Hide our tooltip
  $(".tooltip").hover(function () {
    clearTimeout(timeout);
    $(".tooltip").hide();
  }).hover(hide);
});

这是我的代码，允许我通过hover中的iframe来显示标题

$(document).ready(function(){
  $("#myvid").hover(function(){
    // Show our tooltip on hover
    $(".tooltip").show();
  }, function(){
    // Hide our tooltip
    $(".tooltip").hide();
  })
});

.tooltip {
  height: 40px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.tooltip .title-background {
  background-color: #000;
  height: 40px;
  left: 0;
  opacity: 0.6;
  position: absolute;
  top: 0;
  width: 100%;
}
.tooltip .title-display {
	color: #fff;
  font-size: 16px;
  font-weight: 500;
  left: 10px;
  position: relative;
  top: 6px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myvid">
      <div class="tooltip" style="display:none;"><div class="title-background"></div><span class="title-display">Movie Title</span></div>
      <iframe width="420" height="345" src="http://www.youtube.com/embed/XGSy3_Czz8k">
      </iframe>
    </div>

如何正确地将这种效果添加到我的jQuery代码中？