Place tipsy in place where every div occure

Cameleon

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