X秒后在元素处显示气球

Question

在经过x秒之后，我试图在html元素上显示一个气球，而不需要用户进行任何必要的操作。我尝试了如下代码示例，但这不像预期的那样工作。代码只在2000 ms之后启用气球，因此如果用户在此之后悬停在元素上，那么他将看到一个气球。

我的目标是在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毫秒之后。但它只显示在元素上方盘旋后的工具提示。因此，您首先必须调用您的ballon插件并将事件绑定到元素。如果已经准备好，只需触发绑定事件：

$(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);
});