移动工具提示的标题答案

【问题标题】：moving the caption of a tooltip移动工具提示的标题
【发布时间】：2014-06-22 10:53:11
【问题描述】：

有人可以告诉我如何在下面的 jsfiddle 中安排图片上方的标题，因为我似乎做不到。标题当前位于图像下方。提前致谢。

<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>

希望对你有帮助

【问题讨论】：

我不禁注意到你的 demo 和你的 posted code 在问题中的细微差别。我们要求提供 minimal example，而不是整个项目，原因是：它有助于澄清问题。如果您不愿意遵守规则，我们为什么要花时间提供帮助？
@DavidThomas 只是认为复制代码是在浪费大家的时间，我很抱歉，我不知道要发布代码的哪一部分，因为我不知道问题出在哪里......所以我假设如果我通过 jsfiddle 发布 JS、CSS 和 HTML，这将解决问题。我将尝试找出我应该发布并发布代码的哪一部分。再次道歉
@DavidThomas 你能帮我看看吗？

标签： javascript jquery html css tooltip

【解决方案1】：

这是更新后的FIDDLE。