使用带有列表的工具提示[HTML，CSS]

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

.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>

Answer 2

我想我让它像你想要的那样工作。尝试将此添加到您的代码中

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>