Javascript Popper.js箭头位置在更改其位置时不会更改

我已经在一个小项目中实现了popper.js，但是我有一个小项目，它带有指向引用元素的箭头，因为当你改变弹出窗口的位置时，例如从底部到顶部，箭头的位置不会改变，我附上我的初始化代码和一些显示问题的图片，希望你能帮助我，谢谢

<div id="${num_transaccion}" class="d-none popup">
<div class="arrow"></div>
<div class="container-body">
<table class="table table-popover">
<thead>
  <tr>
      <th>#Folio Programado</th>
      <th>#Grupo</th>
  </tr>
</thead>
<tbody>
  <tr>
      <td>#Folio Programado</td>
      <td>#Grupo</td>
  </tr>
 </tbody>
</table>
</div>
</div>

弹出窗口的我的css代码：

.arrow {
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;

}

.popup[x-placement="bottom"] .arrow {
  margin-top: -10px;
  border-bottom: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.popup[x-placement="top"] .arrow {
  margin-top: -10px; /* This must be change I think */
  border-top: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.popup {
    max-width: 80%;
    width: 100%;
    padding: 10px;
}

问题的一些图像，当popper.js的位置更改为顶部时，箭头不会更改其位置：

.arrow {
  width: 12px;
  height: 12px;
  display: block;
  position: absolute;

}

.popup[x-placement="bottom"] .arrow {
  margin-top: -10px;
  border-bottom: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}
.popup[x-placement="top"] .arrow {
  margin-top: -10px; /* This must be change I think */
  border-top: 10px solid #D0D3D8;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.popup {
    max-width: 80%;
    width: 100%;
    padding: 10px;
}