在鼠标悬停时调用插件时有延迟，同时在鼠标移出时取消

Question

这不是我的代码，我的代码不能轻易被隔离出来post所以我做了一个空白页。

我想为工具提示插件的执行设置一个延迟（我使用了一个没有这种支持的不同插件，并且不允许更改它）。

一个简单的超时不会解决问题，我不仅要延迟工具提示脚本的执行，而且如果预设时间没有达到，我还必须在用户移出光标时完全中止该执行彻底结束

换句话说，在显示工具提示之前必须有一个延迟，并且如果用户没有将鼠标悬停在 .inline_box 上足够长的时间，则工具提示根本不会显示。

$('.inline_box').tooltip();

.container {
    width: 100%;
    display: table;
    vertical-align: top;
}

.col_left {
    width: 100px;
    display: table-cell;
    background: #708A91;
}

.col_mid {
    display: table-cell;
}

.col_mid input {
    width: 100%;
}

.col_right {
    display: table-cell;
    background: #708A91;
}

.col_right .element_with_variable_width {
    padding: 10px
}

.inline_box {
    display: inline-block;
    vertical-align:  top;
    height:19px;
    width: 30px;
    margin: 0 5px;
    background-color: #E066FF;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="container">
    <div class="col_left"></div>
    <div class="col_mid">
        <input type="text">
    </div>
    <div class="col_right">
        <span class="element_with_variable_width">
            <span class="inline_box" title="Some info"></span>
            <span class="inline_box" title="some other info"></span>
            <span class="inline_box" title="Moar info"></span>
        </span>
    </div>
</div>

Answer 1

您可以取消 javascript 超时。

所以在 mouseIn 上你开始超时并将它分配给某个变量。在 mouseOut 上，您只需取消该超时。 Example

在鼠标悬停时调用插件时有延迟，同时在鼠标移出时取消

Have a delay when calling a plugin on mouse over, while also canceling on mouse out

javascript

tooltip