가상 요소 (pseudo-element)

CSS 쿼리문 안에 가상 요소(pseudo-element)가 포함되어 있으면 항상 빈 노드리스트를 반환합니다. 쿼리 선택자에 CSS 쿼리를 사용할 때는 가상 요소는 포함하면 안 됩니다.

  var popoverInstance = new bootstrap.Popover(popoverElement, {
                placement: 'right',
                trigger: 'hover',
                html: true,
                content: function () {
                    var div = document.createElement('div');
                    div.innerHTML = dataContent;
                    div.style.marginTop = '-10px';
                    return div;
                }
            });

            popoverInstance.show();

// 팝오버의 DOM 요소에 직접 스타일 적용 (.tip을 사용하면 팝오버의 실제 DOM 요소에 직접 접근 가능)
var popoverTip = popoverInstance.tip;
popoverTip.style.backgroundColor = '#FF0000'; // 팝오버 배경 색상을 변경
popoverTip.style.height = '40px'; // 적절한 값으로 조절

// 팝오버 내부의 화살표 요소에 직접 스타일 및 클래스 적용
var popoverArrow = popoverTip.querySelector('.popover-arrow::before');

// 화살표 색상 변경
popoverArrow.style.borderRightColor = '#FF0000';

저런식으로 중간에 popover-arrow까지는 인식이 되는데 뒤에 ::before 인식이 안됨.

var popoverArrow = popoverTip.querySelector('.popover-arrow::before');
``