Question

查看了W3School的工具提示指南，并基本上重新输入了它，但是该示例未使用列表，并且我正在为正在使用的练习网站使用列表。结果，它的格式很奇怪。

我尝试弄乱它，删除了li标签，它起作用了，但这不是我想要的。

h1 {
    color: #D3D3D3;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .toolptiptext::after; {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
    }

我希望它是一个列表，当您将鼠标悬停在其上时，它将显示工具提示，其格式与常规HTML列表相同。就是这样。

Answer 1

我认为我可以按照您的要求进行工作。尝试将其添加到您的代码中

li {
  list-style: none;
  float: left;
  clear: left;
}

li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

  .tooltip {
    position: relative;
  }

  li {
  list-style: none;
  float: left;
  clear: left;
}

  li:before {
  content: '\ffed';
  margin-right: 0.5em;
}

  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
  }

  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

    <ul>
      <li class="tooltip">
        Hover over me
      <span class="tooltiptext">Tooltip text</span>
      </li>
      <li class="tooltip">
And again
<span class="tooltiptext">Tooltip text</span>
</li>
    </ul>

Answer 2

.tooltiplink::after {
  visibility: hidden;
  content: attr(name);
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  margin: -1rem;
  padding: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
  opacity: 0;
  transition: opacity 0.3s;
}
.tooltiplink:hover::after {
  visibility: visible;
  opacity: 1;
}

<ul>
  <li class="tooltiplink" name="This is a tooltip">Option 1
  </li>
  <li class="tooltiplink" name="This is a tooltip for the 2th option">Option 2
  </li>
  <li class="tooltiplink" name="This is a tooltip for the 3th option">Option 3
  </li>
</ul>

在列表[HTML，CSS]中使用tootips

2 个答案: