javascript - x 秒后在元素处显示气球

Question

我尝试在 x 秒过去后在 html 元素上显示气球，而无需用户进行任何所需的操作。我像下面的代码示例一样尝试了它，但这并不像预期的那样工作。该代码仅在 2000 毫秒后启用气球，因此如果用户在此时间之后将鼠标悬停在该元素上，那么他将看到一个气球。

我的目标是在 x 秒后显示气球，而用户无需将鼠标悬停在元素上，无论鼠标指向何处，气球都应该显示。

$(document).ready(function() {
  setTimeout(function() {
    $('#myelement').balloon({
      position: "bottom", 
      contents: "Show a message.", 
      css: { color: "red"}
    });
  }, 2000);
});

#myelement {
  border: 1px solid black;
  background-color: #D8D8D8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/urin/jquery.balloon.js/master/jquery.balloon.js"></script>

<div id="myelement">
  <h1>TEST</h1>
</div>

Answer 1

您刚刚在 2000 毫秒后绑定(bind)了事件。但它仅在将鼠标悬停在元素上后显示工具提示。因此，您首先必须调用 ballon 插件并将事件绑定(bind)到元素。如果准备好了，就触发绑定(bind)的事件:

$(document).ready(function() {
  // Activate Plugin
  $('#myelement').balloon({position: "bottom", contents: "Show a message.", css: { color: "red"}});

  // Set delay and run event
  setTimeout(function() {
    $('#myelement').trigger('mouseenter');
  }, 2000);
});