Использование подсказок со списками [HTML, CSS]

#html #css #tooltip #html-lists

#HTML #css #всплывающая подсказка #html-списки

Вопрос:

Просмотрел руководство по всплывающим подсказкам 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. Это действительно так.

1. Можете ли вы отредактировать свой вопрос и включить HTML-код своей страницы?

2. О, извините! Я уже заставил это работать, используя предложение Йенса Ингеля, но если вы хотите, я могу показать вам это.

3. В этом нет необходимости, поскольку принятый ответ включал образец HTML.

Ответ №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>

Развернуть фрагмент

Ответ №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>

Развернуть фрагмент