ng-bootstrap / popover css для контента

Question

Я пытаюсь установить CSS для контента ng-bootstrap, но он не работает должным образом для большого контента.Стрелка скрывает большой контент.Я установил Top в CSS, и для маленького (английского) контента он показывает хорошо, но для большого испанского контента не работает.

.popoverLink {
  background:none;border:none;
  text-decoration: underline;
}

.popover {
  text-align:left;
  min-width: 183px;
  padding: 8px;
  background: #F9F6F3;
  top: -46px;
  min-height: 63px;
  box-shadow: 0 1px 1px 0 rgba(0,0,0,0.2);
  border: 1px solid #CCCCCC;
  left: -106px;
  max-width: fit-content;
  //max-height: fit-content;
  overflow-wrap:break-word;
  overflow: hidden;
}
.close {
  cursor: pointer;
  position: absolute;
  top: -3%;
  right: 3%;
}

.close img {
  width: 15px;
  height: 15px;
}
.close:hover {background: none;}

всплывающее окно

<ng-template #popContent >
              <div class="popover" >{{filterData(split(element.description)[0])}}
                <button class="close" (click)="p.close()"><img src="assets/icons/close.svg"></button>
              </div>
            </ng-template>

            <button class="popoverLink" [ngbPopover]="popContent"  [autoClose]="false"
                    triggers="manual" #p="ngbPopover" (click)="p.open()" placement="top-left" container="body" html="true">
              {{split(element.description)[0]}}
            </button>