Need Help Repositioning a jQuery Tooltip inside nested div

Sample can be seen at this link

I'm using some jQuery Tool tooltip code that will bring up a stylized tooltip when the user hovers over a set of li tags. Right now, I'm just playing with the sample png file that came with the demo. This uses a black box as a background image and then anything I put inside a div class="tooltip" shows up as text inside that image.

Nice, but I can't quite get the tooltip box to pop up where I want it. The li tags are nested inside a div, which is nested inside other divs. So, I need some help figuring out how to tweak the CSS to reposition the tooltip. I'd like it to appear just to the right of the selected li tag, and still stay within the maincol div. Actually, I don't even mind if it floats outside that maincol, just as long as I can get it to show up somewhat closer to the li tag's text.

Here is just a small sample of the html...

<div id="maincol" class="second">
        <!-- Tabs -->
        <h2>Tooltip Test (would like tooltip to show up to right of li items, still inside div tabs and maincol</h2>
        <div id="tabs">
            <ul>
                <li><a href="#details">Details</a></li>
                <li><a href="#measurements">Measurements</a></li>
                <li><a href="#descriptions">Descriptions</a></li>
                <li><a href="#ids"><span>IDs</span></a></li>
                 <li><a href="#events"><span>Events</span></a></li>
                 <li><a href="#locations"><span>Locations</span></a></li>

            </ul>

            <div id="details" class="switches">
                    <ul>
                        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</li>
                            <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</i></div><br />
                        <li>2: <strong>b</strong></li>
                            <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</i></div><br />
                        <li>3: <strong>c</strong></li>
                            <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</div><br  />
                        <li>4: <strong>d</strong></li>
                            <div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor</div>
                    </ul>
                </div>

and just some of the relevant css

#maincol.second {
padding: 8px;
width:700px;
margin-left: 190px;
margin-right:10px;
background-color:#fff;
min-height:730px;
}

/* tooltip styling */
            .tooltip {
                display:none;
                background:url(http://static.flowplayer.org/tools/img/tooltip/black_arrow_big.png);
                height:163px;
                padding:40px 30px 10px 30px;
                width:200px;
                font-size:11px;
                color:#fff;
            }

            .switches {width: 400px;}
            .switches ul{
                font-size: .85em;
                margin: 1em 0 .5em 0;
                }
            .switches li{
                list-style-type:none;
                color:#800000;
                }