Place tipsy in place where every div occure

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

http://onehackoranother.com/projects/jquery/tipsy/ – Cameleon Mar 01 '12 at 19:26 — Cameleon, Mar 01 '12 at 19:26

score 0 · Answer 1 · answered Mar 01 '12 at 19:06

0

There is an offset options in tipsy, which offsets from the elements.

$('.cat_name').tipsy({gravity: 's', offset: 20 });

answered Mar 01 '12 at 19:06

Starx

77,474
47
185
261

You did not quite understand what was the question :), offset is one thing, making tipsy appear right on top of my divs is that i can't seems to workout. – Cameleon Mar 01 '12 at 19:24
@Cameleon, SO you need to show it on left on left box, and center on the middle box. am i right? – Starx Mar 01 '12 at 19:34

score -1 · Answer 2 · answered Mar 01 '12 at 19:28

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"><a href="#" title="Test" id="1" class="cat_name">lkjoijkj lj lkj oij oi</a></td>
    <td class="box"><a href="#" title="Test 2" id="2" class="cat_name">lkjoijkj lj lkj oij oi</a></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%;
}

Place tipsy in place where every div occure

2 Answers2