工具提示仅在悬停时不显示

Question

这是我的代码，我想显示工具提示，只有当我将鼠标悬停在锚标签上时，最初我隐藏了可见性，只想在悬停时显示。但是当我将鼠标悬停在工具提示上时没有显示工具提示，并且我在控制台上也没有收到任何错误。我在这里做错了什么？任何人都可以帮忙

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  margin: auto;
  width: 80%;
  background-color: #F9F9F9;
  padding: 10px;
  border-radius: 12px;
}

.links {
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

a {
  text-align: center;
}

.spanhead1 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 69px;
  word-break: break-all;
}

.spanhead2 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 48px;
  word-break: break-all;
}

.heading {
  font-weight: bold;
  font-size: 20px;
}

.spanhead1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead1 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead1:hover .tooltiptext {
  visibility: visible;
}

.spanhead2 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead2 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead2:hover .tooltiptext {
  visibility: visible;
}

<div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div class="links">
    <span class="spanhead1">
      <a href="javascript:void()" onclick="winperson_folowup()" style="color: rgb(0,113,206);">Open Door (ODP-)</a>
      <span class="tooltiptext">For opendoor</span>
    </span>
    <span class="spanhead2">
      <a href="https://xyz" target="_blank" style="color: rgb(0,113,206);">Ethics (IIMT-)</a>
      <span class="tooltiptext">For Inperson</span>
    </span>
  </div>
</div>

Answer 1

此答案与原始问题有关

---

首先：我发现了一些问题：

• 交换两个跨度文本。
• 没有为工具提示的任何父级定义 position 属性。因此，bottom 指的是 body。您可以通过将容器 div.links 设置为 position: relative 来解决此问题。
• 您为工具提示使用了错误的选择器，例如 .spanhead1 .tooltiptext。由于它们不是 a.spanhead... 的孩子，所以应该只是 .tooltiptext。

---

您可以使用相邻同级选择器 + 来选择悬停元素的下一个同级，例如：

.spanhead1:hover + .tooltiptext {
  visibility: visible;
}

工作示例：

我稍微压缩了 CSS：

• 我删除了双重工具提示定义，
• 将 margin-top、-left 等的单个值合并为一个简写 margin 和
• 删除了 .header 的定义，因为示例 HTML 中没有。

此外，我使用了一个属性选择器 a[class^="spanhead"]，这意味着选择具有以 spanhead 开头的类的每个锚点。或者，您可以添加一个只有 spanhead 的额外类。

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  width: 80%;
  margin: auto;
  padding: 10px;
  border-radius: 12px;
  background-color: #F9F9F9;
}

.links {
  position: relative;
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

a[class^="spanhead"] {
  width: 69px;
  margin: 20px 15px 0 10px;
  text-align: center;
  font-size: 14px;
  word-break: break-all;
}

.spanhead2 {
  width: 48px;
}

.tooltiptext {
  position: absolute;
  top: 150%;
  left: 50%;
  z-index: 1;
  visibility: hidden;
  width: 120px;
  margin-left: -60px;
  padding: 5px 0;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  background-color: #e1edf9;
  color: #000;
}

.tooltiptext::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
  content: "";
}

a[class^="spanhead"]:hover + .tooltiptext {
  visibility: visible;
}

<div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div class="links">
    <a class="spanhead1" href="javascript:void()" onclick=" person_folowup()">Open Door (ODP-)</a>
    <span class="tooltiptext">For opendoor</span>
    <a class="spanhead2" href="xyz.com">Ethics (IMT-)</a>
    <span class="tooltiptext">For ethics</span>
  </div>

</div>

---

或者，如果您将工具提示嵌套在锚点内，您可以省略 +。优点是您可以将spanheads本身设置为position: relative（而不是div.links），以便工具提示位于其spanhead下方，而不是在水平居中的同一位置。

工作示例：

我添加了一个额外的类 .spanhead 以省略属性选择器。

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  width: 80%;
  margin: auto;
  padding: 10px;
  border-radius: 12px;
  background-color: #F9F9F9;
}

.links {
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

.spanhead {
  position: relative;
  width: 69px;
  margin: 20px 15px 0 10px;
  text-align: center;
  font-size: 14px;
  word-break: break-all;
}

.spanhead2 {
  width: 48px;
}

.tooltiptext {
  position: absolute;
  top: 150%;
  left: 50%;
  z-index: 1;
  visibility: hidden;
  width: 120px;
  margin-left: -60px;
  padding: 5px 0;
  border-radius: 6px;
  text-align: center;
  font-size: 16px;
  background-color: #e1edf9;
  color: #000;
}

.tooltiptext::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
  content: "";
}

.spanhead:hover .tooltiptext {
  visibility: visible;
}

<div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div class="links">
    <a class="spanhead spanhead1" href="javascript:void()" onclick=" person_folowup()">Open Door (ODP-)
      <span class="tooltiptext">For opendoor</span>
    </a>
    <a class="spanhead spanhead2" href="xyz.com">Ethics (IMT-)
      <span class="tooltiptext">For ethics</span>
    </a>
  </div>

</div>

Answer 2

您的工具提示仅显示在下方页面的底部，我最好将工具提示放在左侧。

body {
  font-family: Bogle, Bogle, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

div {
  margin: auto;
  width: 80%;
  background-color: #F9F9F9;
  padding: 10px;
  border-radius: 12px;
}

.links {
  display: flex;
  justify-content: center;
}

p {
  text-align: center;
  font-size: 18px;
}

a {
  text-align: center;
}

.spanhead1 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 69px;
  word-break: break-all;
}

.spanhead2 {
  margin-right: 15px;
  margin-left: 10px;
  font-size: 14px;
  margin-top: 20px;
  width: 48px;
  word-break: break-all;
}

.heading {
  font-weight: bold;
  font-size: 20px;
}

.spanhead1 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 45%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead1 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead1:hover .tooltiptext {
  visibility: visible;
}

.spanhead2 .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #e1edf9;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 16px;
}

.spanhead2 .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #e1edf9 transparent;
}

.spanhead2:hover .tooltiptext {
  visibility: visible;
}

<div>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  <p>xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  <div class="links"><span class="spanhead1"><a href="javascript:void()" onclick="winperson_folowup()" style="color: rgb(0,113,206);">Open Door (ODP-)</a>
    <span class="tooltiptext">For opendoor</span>
    </span>
    <span class="spanhead2">
    <a href="https://xyz" target="_blank" style="color: rgb(0,113,206);">Ethics (IIMT-)</a>
    <span class="tooltiptext">For Inperson</span>
    </span>
  </div>
  
</div>

Answer 3

这是 Bootstrap 5 文档。我希望你能从中得到帮助。 https://getbootstrap.com/docs/5.0/components/tooltips/