В чем может быть проблема, вызывающая всплывающую подсказку, скрытую в других местах? - PullRequest
Новая
       24

В чем может быть проблема, вызывающая всплывающую подсказку, скрытую в других местах?

0 голосов
/ 16 мая 2019

Я создаю свой сайт-портфолио от Weebly.Я хочу добавить тег как элементы со всплывающими подсказками при наведении курсора, поэтому я начинаю исследовать с пользовательским HTML и CSS и следовать учебному пособию от w3schools.Я понял, что подсказки не на вершине;
Я прочитал описание и понимаю свойства и атрибуты CSS.Я попытался добавить z-индекс, который больше, чем все другие существующие элементы.Однако даже смехотворно большой z-индекс одинаков.Я приложил результат, пользовательский HTML и CSS, которые я написал в редакторе Weebly;

.ToolTip {
  position: relative;
  display: inline-block;
  z-index: 2;/* //Largest index I could find in the theme is 6.*/
  /*//For Testing*/
  height: 100px;
  top: 30px;
}

.ToolTip .ToolTipText {
  background: #F7ADA2; //Color for ToolTip - F7ADA2, 5A3857, D6345D, DD9B70, E7D7C2, A68A80, 725752
  visibility: hidden;
  display: inline-block;
  text-align: center;
  border-radius: 0.6em;
  box-shadow: 0px 0px 0.2em 0.1em rgba(0.35,0.22,0.34, 0.1);
  
  margin-left: -0.3em;
  padding: 0.4em 1.2em;
  /*//set position of ToolTip box*/
  position: absolute;
  bottom: 6.8em;
  opacity: 0;
  transition: opacity 0.3s;
}

.ToolTip .ToolTipText::after {
  content: "";
  position: absolute;
  bottom: -0.6em;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #F7ADA2 transparent transparent transparent;
}

.ToolTip:hover .ToolTipText {
  visibility: visible;
  z-index: 1000000000; /*//Try to plug a really high index*/
  opacity: 1;
}
<div class="LinkTagWrapper">
  <div class="ToolTip">
    <span class="ToolTipText">
      testing abc
    </span>
    <a class="LinkTag" href="">
      <div class="LinkTagGroup">
        <div class="LinkTagImage"> 
          xx
        </div>
        <span class="LinkTagDes">
          Berd
        </span>
      </div>
    </a>
  </div>
</div>

Я ожидаю, что код может заставить div всплывающей подсказки наверху всего.Пространство сбоку и сверху, кажется, все еще сверху;

Опубликован результат всплывающих подсказок при наведении курсора

1 Ответ

0 голосов
/ 19 мая 2019

Похоже, проблема переполнения, но трудно понять, не видя весь код для сайта / страницы.По сути, пользовательский элемент html имеет переполнение, стилизованное под html элемента, и это будет его причиной.

Попробуйте добавить отступы над «кнопками» BERD / BERDDD или над самим LinkTagWrapper;

.LinkTagWrapper {
    padding: 30px 0 0 0;
}
...