Find closest element with given class JQuery
<p>I have this <code>HTML</code>:</p>

<pre><code>&lt;div class="field select"&gt;
    &lt;div class="FormToolTipContainer"&gt;
        &lt;h2&gt;Details&lt;/h2&gt;
        &lt;div class="FormToolTip"&gt;&amp;#63;                                                
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;                                    
&lt;div class="FormToolTipText"&gt;&lt;strong&gt;Tool tip:&lt;/strong&gt; Add details here&lt;/div&gt;
</code></pre>

<p>Then I have this:</p>

<pre><code>$(function () {
    $(".FormToolTip").hover(function () {
        var ToolTipDiv = $(this).closest('.FormToolTipText');

        ToolTipDiv.toggle();

        var ToolTipOffset = $('.FormToolTip').offset();
        ToolTipOffset.top = ToolTipOffset.top + 40;
        ToolTipDiv.css(ToolTipOffset);

    }, function () {
        var ToolTipDiv = $(this).find(':first-child');
        ToolTipDiv.toggle();
    });
});
</code></pre>

<p>Where I am trying to find the element <code>FormToolTipText</code> by using the <code>closest</code> selector on <code>this</code> but it is not work.</p>

<p>I have also tried <code>next</code> but that does not work.</p>

<p>Is it because the element <code>FormToolTipText</code> is outside <code>FormToolTip</code></p>

<p>As far as I can see I have followed these instructions here:
<a href="https://api.jquery.com/next/" rel="nofollow">https://api.jquery.com/next/</a>
<a href="https://api.jquery.com/closest/" rel="nofollow">https://api.jquery.com/closest/</a></p>

<p>and numerous SO questions, but none of them will select the element I have tried.</p>

<p>As I said, I have tried every variation I can think of, and everything I can find but none of them work. </p>

<p>Basically I am trying to make a tooltip and need to navigate to the closest div with the class <code>FormToolTipText</code> but can only do so in relation to <code>this</code></p>

<p>Any ideas?</p>