Подсказка к материалу AngularJS с относительным разрывом позиции из-за заполнения - PullRequest
Новая
       9

Подсказка к материалу AngularJS с относительным разрывом позиции из-за заполнения

0 голосов
/ 18 января 2019

Содержимое всплывающей подсказки, перекрывающее содержимое объекта триггера

Я использую AngularJS и материал для создания компонентов.Часть одного компонента - это всплывающая подсказка, которая расположена выше и relative для целевого элемента.Поскольку во всплывающей подсказке должен быть указатель на треугольник, ей действительно необходимо относительное положение, а не абсолютное.

Поскольку я должен соответствовать определенному необходимому отступу для содержимого, всплывающая подсказка перекрывает целевой элемент, и я не могу сдвинуть его с места, если не возьму верхнюю часть .md-tooltip, что потребует от менясделать это через Javascript, что я могу сделать, только если они постоянно видны, что они не должны быть.

template.html 

...
<md-tooltip md-direction="top">
  <span class="tooltipContent"> Just some random text </span>
</md-tooltip>
...

template.scss 

.md-tooltip {
  background-color: grey;
  border-radius: 4px;
}

.md-tooltip.md-show, .md-tooltip.md-hide {
  @extend .md-tooltip;

  position: relative;
  padding-bottom: 10px;
  padding-top: 10px;
}

// tooltip triangle pointer
.md-tooltip::before {
  position: absolute;
  content: " ";
  top: 97%;
  left: 50%;
  margin-left: -8px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  align-self: center;
  border-top: 5px solid grey;
}

// tooltip
.tooltipContent {
  max-width: 218px;
  font-size: 12px;
  line-height: 1.33;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: table-cell;
  overflow: hidden;
  padding-left: 8px;
  padding-right: 8px;
  color: white;
}

Вот скриншот происходящего:

Всплывающая подсказка со стрелкой над содержимым

...