Question

我正在尝试仅使用css复制我自己版本的jQuery工具提示，但我无法正确定位垂直位置。

这就是我试图让它看起来像（漂浮在文本上方）：

enter image description here

以下是我目前正在使用的代码。

.wrapper {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  width: 70%;
  color: white;
}
body,
html {
  background-color: black;
  margin: 0;
  padding: 0;
}
a {
  color: orange;
  text-decoration: none;
}
.linkhover {
  display: none;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  color: black;
  margin-bottom: 1em;
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 6px #aaa;
  box-shadow: 0 0 6px #aaa;
}
a:hover .linkhover {
  display: inline;
}

<div class='wrapper'>
  So I was browsing things on <a href='#'>stackoverflow <div class='linkhover'>A great place to get help with code!</div></a> a while ago and I noticed some pretty funny comments about jQuery!
</div>

我也尝试过使用

.linkhover{
    top: 50%;
    left: 50%;
}

但这影响了每一个链接，我打算在同一页面上使用它来处理多个链接。

知道如何实现这一目标吗？提前谢谢。

Answer 1

您需要确保定位与父母相关。在父级上设置position:relative：

.wrapper{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  width: 70%;
  color: white;
  position: relative;
}

Answer 2

将工具提示放在容器中并相对放置。然后绝对定位工具提示。给容器一个负偏移并调整定位。

＆＃13;

.wrapper{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  width: 70%;
  color: white;
}
body,html{
  background-color: black;
  margin: 0;
  padding: 0;
}
a{
  color: orange;
  text-decoration: none;
}
.linkhover{
  display: none;
  background: rgba(255,255,255, 0.7);
  border-radius: 5px;
  color: black;
  margin-bottom: 1em;
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 6px #aaa;
  box-shadow: 0 0 6px #aaa;
}
span#tooltipContainer {
  position: relative;
  left: -100px;
  top: -30px;
}
a:hover .linkhover{
  position: absolute;
  top: -15px;
  left: 0;
  height: 30px;
  width: 100px;
  display: inline;
  
}

＆＃13;

<div class='wrapper'>
    So I was browsing things on <a href='#'>stackoverflow <span id="tooltipContainer"><div class='linkhover'>A great place to get help with code!</div></span></a> a while ago and I noticed some pretty funny comments about jQuery!
</div>

＆＃13;

Answer 3

感谢您的回答，但我记得我可以使用负边距。除了bhojendra-c-link-nepal's回答和一些负边缘，我得到了这个结果：

＆＃13;

.wrapper{
  margin-left: auto;
  margin-right: auto;
  margin-top: 5em;
  width: 70%;
  color: white;
  position: relative;
}
body,html{
  background-color: black;
  margin: 0;
  padding: 0;
}
a{
  color: orange;
  text-decoration: none;
}
.linkhover{
  display: none;
  background: rgba(200,200,200, 0.9);
  border-radius: 5px;
  color: black;
  padding: 8px;
  position: absolute;
  z-index: 9999;
  max-width: 300px;
  -webkit-box-shadow: 0 0 6px #aaa;
  box-shadow: 0 0 6px #aaa;
  margin-top: -35px;
  margin-left: -170px;
}
a:hover .linkhover{
  display: inline;
}

＆＃13;

<div class='wrapper'>
    So I was browsing things on <a href='#'>stackoverflow <div class='linkhover'>A great place to get help with code!</div></a> a while ago and I noticed some pretty funny comments about jQuery!
</div>

＆＃13;

我不知道这是否是最佳方式，但似乎有效谢谢你的帮助^^

CSS - 将绝对div定位为垂直和水平浮动

3 个答案: