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

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

此回答与原问题相关

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

两个跨度文本互换。
没有为工具提示的任何 parent 定义 position 属性。因此bottom指的是body。您可以通过将容器 div.links 设置为 position: relative.
您为工具提示使用了错误的 select 或，例如 .spanhead1 .tooltiptext。由于它们不是 a.spanhead... 的 children，因此应该只是 .tooltiptext。

您可以使用相邻的同级 select 或 + 作为悬停元素的下一个同级 select，例如：

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

工作示例：

我压缩了一点 CSS：

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

此外，我使用了属性 select 或 a[class^="spanhead"]，这意味着 select 每个带有 class 且以 spanhead 开头的锚点。或者，您可以添加一个额外的 class，它只是 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），这样工具提示就在它的 spanheads 下面，而不是在水平居中的同一位置。

工作示例：

我添加了额外的 class .spanhead 来省略属性 selector.

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/

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

Tooltip not showing only on hover

html

css

tooltip