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

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

1 голос
/ 17 апреля 2019

Посмотрел руководство по подсказкам 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;
    }

Iожидайте, что это будет список, который при наведении на него покажет подсказку, отформатирован так же, как обычный список HTML.Это действительно так.

Ответы [ 2 ]

1 голос
/ 17 апреля 2019 

.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>
1 голос
/ 17 апреля 2019

Я думаю, что сделал так, как ты хочешь.Попробуйте добавить это к своему коду 

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