vite 项目 vxeTable表格多行省略，并bootstrap框架 tooltip显示全部内容

需求

vue3项目中，使用了vxeTable和bootstrap组件，在使用表格时，当内容多行省略时，tooltip显示全部内容

vue模板

<vxe-table
  border
  :scroll-y="{ enabled: false }"
  :row-config="{ isHover: true }"
  :align="'center'"
  class="penalty-table"
  :data="list"
>
  <vxe-column field="illegalFact" title="姓名" show-overflow="tooltip">
    <template #default="{ row }">
      <span
        :id="'illegal-fact-' + row.id"
        class="illegal-fact-tooltip element"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        :data-bs-title="row.illegalFact"
        @mouseenter="showTooltip('illegal-fact-' + row.id)"
        @mouseleave="hideTooltip('illegal-fact-' + row.id)"
      >
        {{ row.illegalFact }}
      </span>
    </template>
  </vxe-column>
  <vxe-column field="penaltyCode" title="性别"></vxe-column>
  <vxe-column field="penaltyGist" title="测试" show-overflow="tooltip">
    <template #default="{ row }">
      <span
        :id="'penalty-gist-' + row.id"
        class="illegal-fact-tooltip element"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        :data-bs-title="row.penaltyGist"
        @mouseenter="showTooltip('penalty-gist-' + row.id)"
        @mouseleave="hideTooltip('penalty-gist-' + row.id)"
      >
        {{ row.penaltyGist }}
      </span>
    </template>
  </vxe-column>
  <template #empty>
    <span style="display: inline-block; height: 300px">
      <img
        src="@/assets/images/emptyIcon.png"
        style="margin-top: 50px"
        alt="图片"
        @error.once="setDefaultImage"
      />
      <p>没有更多数据了！</p>
    </span>
  </template>
</vxe-table>

ts代码

const showTooltip = (id: any) => {
  if (
    (document.getElementById(id)?.scrollHeight as number) >
    (document.getElementById(id)?.offsetHeight as number)
  ) {
    $('.table-row  #' + id).tooltip()
    $('.table-row  #' + id).tooltip('show')
  }
}

const hideTooltip = (id: any) => {
  if (
    (document.getElementById(id)?.scrollHeight as number) >
    (document.getElementById(id)?.offsetHeight as number)
  ) {
    $('.table-row  #' + id).tooltip('hide')
  }
}

scss代码

:deep(.vxe-table--render-default .vxe-body--column.col--ellipsis:not(.col--actived) > .vxe-cell) {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: normal;
  max-height: none;
}