Добавить в popover закрывающий крестик и кастомизировать его

Question

Использую Bootstrap 4.6 и компонент popover.

Необходимо добавить крестик,который так же должен при нажатии его закрывать. Так же,пытался реализовать через title="+", однако как его сверстать так,чтобы крестик был идентичным, как на картинке, т.е была возможность прописать ему нужные свойства.

Answer 1

Пример

$(function() {
  $('[data-toggle="popover"]').popover({
    placement: "right",
    html: true,
    title: '<a href="#" class="close" data-dismiss="alert"></a>',
    content: '<div>Excellent Bootstrap popover! I really love it.</div>'
  });
  $(document).on("click", ".popover .close", function() {
    $(this).parents(".popover").popover("hide");
  });
});

body {
  padding: 4rem 2rem;
}

.popover .close {
  width: 1rem;
  height: 1rem;
  display: flex;
  position: relative;
  margin-left: auto;
  float: none;
}

.popover .close::before,
.popover .close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 2px;
  background-color: #5A5A5A;
  margin: -1px 0 0 -.5rem;
  transform: rotate(45deg);
  cursor: pointer;
  border-radius: 2px;
}

.popover .close::after {
  transform: rotate(-45deg);
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>

<button type="button" class="btn btn-lg btn-danger js-button-popover" data-toggle="popover">
  Click to toggle popover
</button>

БЛОГ НА HUSL

Добавить в popover закрывающий крестик и кастомизировать его

Ответы (1 шт):