How do I center a message in a div via jQuery
<p>This is a slideshow, and when you click the questionmark ,more info shows up. The position of the LI is changing over time and is never static.</p>

<p>I'm trying to have a message show up onclick that is hidden. The showing up is easy. However, I want it's left position to be relative to the parent UL not the object's parent which is position relative. Any ideas on how to come up with the math?</p>

<p>I've been struggling with the left position. Suggestions welcome.</p>

<p>Here's my JS (at least how I think it should work:</p>

<pre><code>    $('.info_toggle a').click(function() {
    $('.tooltip').hide();
    var left_position = $(this).parent().parent().parent().parent().parent().parent().position() -1;
    console.log(left_offset);
    $(this).parent().parent().parent().next('.tooltip').show().css('left', 'left_position');
    return false;
});
</code></pre>

<p>Here: my markup:</p>

<pre><code>&lt;ul id="activities_nav" class="clearfix"&gt;
&lt;div class="activity_group"&gt;

        &lt;li&gt;
            &lt;div class="summary"&gt;
                &lt;h4&gt;Category One&amp;nbsp;&lt;span class="info_toggle"&gt;(&lt;a href="#"&gt;?&lt;/a&gt;)&lt;/span&gt;&lt;/h4&gt;
                &lt;p class="num_activities"&gt;3&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="tooltip" style="display: block; "&gt;
                &lt;a href="#" class="close"&gt;close&lt;/a&gt;
                &lt;h4&gt;Category Description&lt;/h4&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna turpis, gravida eu tincidunt a, consequat a mauris. Suspendisse dolor lacus,&lt;/p&gt;
            &lt;/div&gt;
        &lt;/li&gt;

        &lt;li&gt;
            &lt;div class="summary"&gt;
                &lt;h4&gt;Category One&amp;nbsp;&lt;span class="info_toggle"&gt;(&lt;a href="#"&gt;?&lt;/a&gt;)&lt;/span&gt;&lt;/h4&gt;
                &lt;p class="num_activities"&gt;3&lt;/p&gt;
            &lt;/div&gt;
            &lt;div class="tooltip" style="display: block; "&gt;
                &lt;a href="#" class="close"&gt;close&lt;/a&gt;
                &lt;h4&gt;Category Description&lt;/h4&gt;
                &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum urna turpis, gravida eu tincidunt a, consequat a mauris. Suspendisse dolor lacus,&lt;/p&gt;
            &lt;/div&gt;
        &lt;/li&gt;
&lt;/div&gt;
</code></pre>

<p></p>
