Place tipsy in place where every div occure - css

Question

Javascript:
<script type="text/javascript">
$(function() { $('.cat_name').tipsy({gravity: 's'}); });
</script>
TPL Smarty:
<div id="content_inside">
<a href="#" title="Test" id="1" class="cat_name">
<div class="box">
</div>
</a>
<a href="#" title="Test2" id="2" class="cat_name">
<div class="box">
</div>
</a>
</div><!-- content end -->
CSS:
#content_inside {
height: 500px;
width: 950px;
padding:5px;
}
.box {
width: 300px;
height: 261px;
padding: 5px;
float: left;
}
.box {
margin: auto;
background: url(../images/box1.jpg) no-repeat top left;
}
I need to place tipsy in upper center of every div link, how to do that?, for now tipsy are shown always at left side. Example of how is, and how need to be in img: http://oi43.tinypic.com/adka3t.jpg

Answer 1

There is an offset options in tipsy, which offsets from the elements.
$('.cat_name').tipsy({gravity: 's', offset: 20 });

Answer 2

Unfortunately, your float: left is causing tipsy to calculate the offset incorrectly. Are you able to lay out your page any differently? As an example, the following boring old tables layout seems to replicate what you're looking for designwise, as well as having the tooltips show up where you want them.
HTML:
<div id="content_inside">
<table>
<tr>
<td class="box">lkjoijkj lj lkj oij oi</td>
<td class="box">lkjoijkj lj lkj oij oi</td>
</tr>
</table>
</div>
CSS:
#content_inside {
height: 500px;
width: 950px;
padding:5px;
}
.box {
width: 300px;
height: 261px;
padding: 5px;
}
a {
display:block;
height: 100%;
}