Show/hide a div if the cursor is hovering over a button
<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>if ($('.add-to-cart').hasClass("disabled"))
{
    if ($('.tooltip').hasClass("show"))
    {

        $(this).mouseout(function(){
            $('.tooltip').removeClass('show');
        });
    }
    else
    {

        $(this).mouseover(function(){
            $('.tooltip').addClass('show');
        });
    }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="purchase"&gt;
    &lt;span class="tooltip"&gt;This is some information for our tooltip.&lt;/span&gt;
    &lt;input type="submit" value="Add to basket" class="add-to-cart disabled" id="submit-table" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>I have found some solutions for my issue but none of them seem to be working for me.</p>

<p>I'm trying to show a <code>span</code> when you hover over a button and I'd like to also hide the <code>span</code> when you are <em>NOT</em> hovering over the button. A simple hide/show feature that I'd like implemented only when the button has a class of <code>disabled</code>, here's the JS that only shows the span but doesn't hide it.</p>