内容的ng-bootstrap / popover CSS

Question

我正在尝试为ng-bootstrap内容设置CSS，但是对于大内容却无法正常工作。箭头隐藏了大量内容。我已经在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>