Popper.js не работает, если импортирован загрузочный CSS? - PullRequest
Новая
       53

Popper.js не работает, если импортирован загрузочный CSS?

1 голос
/ 28 июня 2019

Я столкнулся с действительно необычной проблемой, когда Popper.js и Tooltip.js отказываются работать, если я использую Bootstrap CSS.

Вот код, который яЯ использую для проверки этого: 

<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script>

<span id="test-tooltip" data-tooltip="Testing tooltips!">Hover over me, I dare you.</span>

 <script>
  document.addEventListener('DOMContentLoaded', function() {
    var referenceElement = document.getElementById("test-tooltip");
    var instance = new Tooltip(referenceElement, {
      title: referenceElement.getAttribute('data-tooltip'),
      placement: "bottom",
    });
  });
</script>

Есть также немного CSS, но он довольно длинный, поэтому я оставлю это внизу.

Если я включу Bootstrap где-нибудь, весьвещь просто перестает работать.При наведении курсора ничего не отображается. 

<link rel="stylesheet" href="CSS/bootstrap.css">

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

Вот CSS, который сейчас используется.используется для стилизации всплывающих подсказок: 

.popper,
.tooltip {
  position: absolute;
  background: rgb(75, 75, 75);
  color: white;
  min-width: 80px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  padding: 12px;
  text-align: center;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
  border-color: rgb(75, 75, 75);
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 6px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 6px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 6px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 6px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -6px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

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

  • Удаление всего, что связано с всплывающими подсказками, из bootstrap.css
  • Импортирование начальной загрузки до / после связанных с Popper.js вещей в коде.
  • Размещение пользовательского CSS в bootstrap.css.

и многие другие вещи, о которых я забыл, пытаясь понять это.

1 Ответ

1 голос
/ 28 июня 2019

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

.tooltip[aria-hidden="false"]{
  opacity:1;
}

Ссылка на рабочую скрипку здесь

...