Question

我想以绝对的方式修复我的Jquery工具提示的位置。无论我的鼠标在哪里或它的徘徊，工具提示都需要出现在该地方，作为div的一个功能。比如，div的左下角。它不是一个静态div的工具提示。但我不打算将工具提示转换为div。

例如，设置工具提示，以便工具提示的左上角由一个坐标设置，该坐标与特定的容器div有关吗？

如果您需要it，这是一个很好的jsfiddle。

Answer 1

如果您在准备html时知道工具提示内容，可以使用css。

这是一个例子。（需要一些造型方面的工作）

.box {
  position: relative;
  width: 200px;
  height: 50px;
  margin-bottom: 70px;
  background-color: blue;
}

.tooltip {
  display: none;
  border: 1px solid black;
  padding: 10px;
  background-color: white;
  position: absolute;
}

/* here are your coordinates */
.box_tooltip_right .tooltip {
  left: calc(100% + 5px);
  top: 0;
}

/* here are your coordinates for bottom tooltip */
.box_tooltip_bottom .tooltip {
  left: 0;
  top: calc(100% + 5px);
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}

.hoverbox:hover .tooltip {
  display: block;
}

<div class="box box_tooltip_bottom">
  
  <div class="hoverbox">
    <div class="tooltip">I am tooltip bottom 1</div>
    Tooltip bottom 1
  </div>

  <div class="hoverbox">
    <div class="tooltip">I am tooltip bottom 2</div>
    Tooltip bottom 2
  </div>

</div>

<div class="box hoverbox box_tooltip_right">
  <div class="tooltip">I am tooltip right</div>
  Tooltip right
</div>

Jquery工具提示绝对定位

1 个答案: