Question

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

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

一个简单的timeOut不会做的伎俩，我不必延迟工具提示脚本的执行，当用户将光标取出时如果预设的时间没有，我也必须完全中止该执行完全结束。

换句话说，在显示工具提示之前必须有一个延迟，如果用户没有将鼠标放在.inline_box上足够长的时间，也不能显示工具提示。< / p>

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您可以取消javascript超时。

因此在mouseIn上启动超时并将其分配给某个变量。在mouseOut上，您只需取消该超时。 Example

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

1 个答案: