javascript - moving the caption of a tooltip -

javascript - moving the caption of a tooltip -

can please tell me how arrange caption above image in jsfiddle below can not seem it. caption below image. in advance.

sample code

<script type="text/javascript"> $(function(){ $("ul.thumb li").hover(function() { $(this) .css('z-index', '10') .find('img').addclass("hover") .stop() .animate({ margintop: '-150px', marginleft: '-150px', top: '50%', left: '50%', width: '300px', height: '300px', padding: '20px' }, 200, function() { var $this = $(this), h = $this.height(); $caption = $('<div class="caption">' + this.title + '</div>') .css('top', h.tostring() + 'px'); $this.after($caption); }); }, function() { $('.caption').remove(); $(this) .css('z-index', '0') .find('img').removeclass("hover") .stop() .animate({ margintop: '0', marginleft: '0', top: '0', left: '0', width: '200px', height: '200px', padding: '5px' }, 400); }); }); </script>

i hope helps

here updated fiddle.

the relevant line one:

.css('top', -h.tostring() + 'px');

it positions div text, , alter position above image, placed negative sign in front end of h.tostring(). finely adjust position multiplying h.tostring() coefficient -.8 or -.92 create finer adjustments. may problematic putting above image, because you'll have adjust position based on height of text div.

javascript jquery html css tooltip