Kendo Angular Tooltip底部定位时三角箭头与内容重叠问题求助

针对你在Kendo Grid中使用Tooltip时遇到的底部定位箭头重叠问题，可通过以下几种方式解决：

1. 自定义CSS调整Tooltip内边距与箭头位置 #

默认的底部定位Tooltip可能内边距不足，导致箭头和内容重叠。直接修改对应的类样式即可：

/* 给底部Tooltip增加底部内边距，为箭头预留空间 */
.k-tooltip.k-tooltip-bottom {
  padding-bottom: 16px; /* 可根据实际需求调整数值 */
}

/* 或者直接调整箭头的定位，使其远离内容区域 */
.k-tooltip.k-tooltip-bottom .k-callout {
  bottom: 4px; /* 向上偏移箭头，避免和内容重叠 */
}

2. 将Tooltip挂载到body下，避免Grid容器样式干扰 #

Grid单元格的overflow、position等样式可能会影响Tooltip的定位计算。给Tooltip添加appendTo="body"属性，让其脱离Grid容器：

<kendo-tooltip 
  target=".your-grid-cell-class"
  position="bottom"
  appendTo="body"
>
  <!-- Tooltip内容 -->
  <ng-template kendoTooltipTemplate let-data>
    {{ data }}
  </ng-template>
</kendo-tooltip>

3. 调整Tooltip内容容器的外边距 #

如果Tooltip内容本身的样式导致重叠，可以给内容容器添加底部外边距：

.k-tooltip-content {
  margin-bottom: 8px;
}

内容的提问来源于stack exchange，提问作者winston dsouza