三角气泡提示框-css

实现一个简单的三角气泡提示框,如图所示

1 比较有意识,就是伪元素添加两个正方形,然后旋转,变成三角形,样式作匹配就可以了

      <VaButton
        preset="secondary"
        size="small"
        icon="mso-edit"
        aria-label="Edit user"
        @click="$emit('edit-user', rowData as any)"
      >
        <span>编辑</span>
      </VaButton>
      <VaButton
        preset="secondary"
        size="small"
        icon="mso-delete"
        color="danger"
        aria-label="Delete user"
        @click="onUserDelete(rowData)"
      >
        <span>删除</span>
      </VaButton>
    </div>
    
    <style>
    .tooltip-content {
  position: relative;
  background-color: white;
  border: 1px solid #d1d5db; 
  padding: 6px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.tooltip-content::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: transparent transparent #d1d5db transparent; 
}

.tooltip-content::after {
  content: '';
  position: absolute;
  bottom: 100%; 
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent white transparent; // 
}
    </style>
    ```