Как прописать css, чтобы скрыть стрелочку у popover только в одном div?

Question

[lumb]

Вопрос смешной, но уже битый час бьюсь

<div class="post-thumbnail">
<a href="999" data-trigger="hover" data-toggle="popover" data-placement="bottom" title=" " data-content="hhh"><img src="/assets/cache_image/assets/296.jpg" class="img-fluid rounded"></a>
            </div>

Вот так скрывает стрелочки у всех popover

.popover > .arrow
{
    display: none;
}

Должно же работать так, но нет

.post-thumbnail .popover > .arrow
{
    display: none;
}

Answer 1

[2cha.headz]

я не вижу у вас внутри .post-thumbnail элемент .popover

закиньте куда-нибудь код или ссылку на текущий дайте

Comments

[lumb]

// Popover
$(function () {
  $('[data-toggle="popover"]').popover()
})

[2cha.headz]

lumb, прописал

.post-thumbnail .popover > .arrow
{
    display: none;
}

стрелка удаляется, попробуйте еще !important добавить)

https://www.w3schools.com/code/tryit.asp?filename=...
(нажать run)

[lumb]

Дмитрий Глаголев, удаляется, но у всех, а не только в диве

[2cha.headz]

lumb, у вас ссылки с popover все обернуты в .post-thumbnail ?
если да, то естественно у всех будет, через nth-child() или какой-то отличный от остальных класс пробуйте

[lumb]

Дмитрий Глаголев, нет, только одна.
У вас действительно работает...
Пойду плакать...

[2cha.headz]

lumb, возможно у вас та ситуация, как описали ниже, т.е. .popover добавляется перед закрывающим body, проинспектируйте элемент на который наводите (т.е. откройте его код в браузере) и в момент наведения смотрите куда у вас popover добавляется в post-thumbnail или перед < /body>

[lumb]

Дмитрий Глаголев, интересно, что в bs4 уже не работает
https://www.w3schools.com/code/tryit.asp?filename=...

[2cha.headz]

lumb, да, там перед < /body> добавляется

[2cha.headz]

$('.post-thumbnail a').hover(function(){$('.popover .arrow').remove()})

[lumb]

Зачем они так всё усложнили.... Риторика

[tyzberd]

Зачем они так всё усложнили.... Риторика

В bs4 он еще меняет свое положение в зависимости от скролла и если не помещается сверху, то откроется снизу.
Еще если у вас блок с overflow: hidden он не будет обрезан

Answer 2

[tyzberd]

поповер добавляется перед </body> вы можете поменять это с помощью selector https://getbootstrap.com/docs/4.2/components/popov...
так же можете создать свой темплейт так

$('#popover').popover({
                                        trigger: 'click',
                                        template: '<div class="popover popover--no-wrap popover--validation popover--subscribe" role="tooltip">' +
                                        '<div class="arrow"></div>' +
                                        '<h3 class="popover-title"></h3>' +
                                        '<div class="popover-content"></div>' +
                                        '</div>'
                                    });

Answer 3

[Павел]

Не должно так работать. Class popver не будет присутствовать в этом блоке, так как div с этим классом появляется перед закрытием </body>

Соответственно Вам нужно, при наведении на .post-thumbnail, определить с помощью js есть ли в body class popover , и соответственно если есть с помощью js убрать стрелку или добавить класс и удалить