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

Question

This is not my code, my code cannot easily be isolated for this post so I made a blank page.

I would like to set a delay for the execution of the tooltip plugin (I use a different plugin with no such support and am not allowed to change it).

A simple timeOut will not do the trick, I don't just have to delay the execution of the tooltip script, I also have to abort that execution completely when the user takes the cursor out if a preset time did not completely end.

In other words, there has to be a delay before displaying the tooltip, and also the tooltip must not be displayed at all if the user doesn't keep the mouse over the .inline_box long enough.

$('.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

You can cancel the javascript timeout.

So on mouseIn you start timeout and assign it to some variable. On the mouseOut you just cancel that timeout. Example