如何正确地将工具提示定位在绝对定位的元素上方？

Question

I have a bunch of images positioned absolute that I'm trying to get tooltips to appear over based on the data attributes specified on the element. For some reason the positioning of the tooltip is always off. I've included a demo. Can anyone spot the issue?

$("div.thing").each(function (i) {
  var objthis = this;
  $(this).qtip({
    show: 'click',
    hide: 'click',
    content: {
      text: 'hey'
    },
    position: {
      corner: {
        tooltip: 'topLeft',
        target: 'topLeft'
      },
      adjust: {
        x: $(objthis).data('left'),
        y: $(objthis).data('top')
      }
    }
  });
});

div#container {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: black;
}

div.thing {
  position: absolute;
  z-index: 1;
  border: 0;
  height: 10px;
  width: 10px;
  top: 50px;
  left: 20px;
  background-color: red;
}

<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
<div id="container">
  <div class="thing" data-top="50" data-left="20"></div>
</div>

- SeanWM

---

不确定是否有帮助，但我认为您的提示工具位置加倍了（100-40而不是50-20）（也许您应该在HTML中删除data-top和data-left？） - Hotted24

Answer 1

通过在 qtip 设置中同时设置 offset，您将使工具提示距离图像太远。尝试移除偏移量：

$("div.thing").each(function (i) {
  var objthis = this;
  $(this).qtip({
    show: 'click',
    hide: 'click',
    content: {
      text: 'hey'
    },
    position: {
      corner: {
        tooltip: 'topLeft',
        target: 'topLeft'
      },
    }
  });
});

div#container {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: black;
}

div.thing {
  position: absolute;
  z-index: 1;
  border: 0;
  height: 10px;
  width: 10px;
  top: 50px;
  left: 20px;
  background-color: red;
}

<link href="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>
<div id="container">
  <div class="thing" data-top="50" data-left="20"></div>
</div>

- Stephan Muller