jquery - Tooltip Effect with Mouseover - 工具提示固定位置

Question

我在使用 jQuery 和 CSS 时遇到了工具提示效果的问题。

我想大致了解一下房间和座位安排。每个座位上都有一个人拿到了一张照片和一些信息。房间本身有大约 60 个座位。

我有一张我放在背景中的照片

#sitzplatzverteilung {
width: 516px;
height: 360px;
position: relative;
margin: 20px 0px;
background: url("6x12x8_sitzplan.jpg") no-repeat;
border: 1px solid;}

接下来我找个位子

.platz {
    width: 39px;
    height: 50px;
    position: absolute;
    cursor: pointer;
    font-size: 11px;
    font-family: arial;
    border: 1px solid;
}

我得到了我想在 mouseover

上显示的信息

.platz_info {
display: none;
background-color: #ffffff;
border: solid 1px #abaaac;
width: 250px;
padding: 3px 5px;
border: 1px solid;
}

每个座位在图片上都有自己的位置。我将 .platz 放在每个座位上

#platz1 {
top: 73px; //next one got different top and left
left: 2px;}

我的座位(正文)html

<div id="sitzplatzverteilung">

<div id="platz1" class="platz">
    <div class="platz_info">
        <img  src="person1.jpg" /><br>
        Test Text1
    </div>
</div>

<div id="platz2" class="platz">
    <div class="platz_info">
        <img  src="person1.jpg" /><br>
        Test Text2
    </div>
</div>  

</div>

显示工具提示的脚本

    $(document).ready(function(){
    $(".platz").mouseenter(function(){
        $(".platz_info").hide();
        $(".platz_info", this).show(0);
    });

    $(".platz_info").click(function () {
        $(".platz_info").hide();
    })
});

---

现在我的问题是，如果我将鼠标悬停在其中一个座位 (platz1 platz2) 上，我的工具提示就会出现。 但是它显示的位置是相对于座位的。因此，每个工具提示都会直接在我鼠标悬停的座位上/旁边打开。

我已经试着给它一个顶部和左侧，这只会让它离每个座位有点远。但我希望工具提示在固定位置打开。同样使用 float:right/left 它只会将工具提示放在座位的左边缘或右边缘。

有没有可能给工具提示(platz_info)一个固定的地方打开？

Answer 1

如果您希望工具提示始终出现在特定位置，则每个工具提示根本不需要多个元素。您可以将一个元素放置在所需位置，并根据悬停的座位更改其内容，如下所示:

 $(document).ready(function () {
  $(".platz").mouseenter(function () {
     $(".platz_info").text($(this).text()).show(0);
  });
  $(".platz").mouseleave(function () {
     $(".platz_info").hide();
  });
  $(".platz_info").click(function () {
     $(".platz_info").hide();
  })
});

JSFiddle