北木南树
2022-06-23 16:14
采纳率: 0%
浏览 34
已结题

跳转详情 项目中所有 antd Tooltip箭头错位

跳转详情 项目中所有 antd Tooltip箭头错位
  <Tooltip
                  title={item.analysisProcessConfDesc}
                  visible={this.logic.data.visibl == item.id}
                  overlayClassName="tooltipDom"
                >
                  <Card
                    bordered={true}
                    onMouseEnter={() => this.logic.setTooltipVisibl(item.id)}
                    onMouseLeave={() => this.logic.setTooltipVisibl('')}
                    hoverable
                    className={styles.cardBady}
                    bodyStyle={{ paddingTop: 10, paddingBottom: 15 }}
                    cover={
                      <Image
                        width="100%"
                        height="100px"
                        className={styles.image}
                        style={{
                          objectFit: 'contain',
                          background: item.imageUrl !== null ? '#fff' : '',
                        }}
                        fallback="https://gw-office.alipayobjects.com/bmw-prod/88d122ee-4c9f-4864-bbb6-6f97c719df5a.svg"
                        src={item.imageUrl}
                      ></Image>
                    }
                    actions={
                      item.jurisdiction
                        ? [
                            <span
                              key="ShareAltOutlined"
                              onClick={() => this.logic.openOprationModel('editor', item)}
                              className={styles.iconHover}
                            >
                              编辑
                            </span>,
                            <span
                              key="copy"
                              onClick={() => this.logic.openOprationModel('copy', item)}
                              className={styles.iconHover}
                            >
                              复制
                            </span>,
                            <span
                              key="ShareAltOutlined"
                              onClick={() => this.logic.openSharerModel(item)}
                              className={styles.iconHover}
                            >
                              共享
                            </span>,
                            <Popconfirm
                              title="删除后不可恢复,确认是否继续?"
                              onConfirm={(key) =>
                                key ? this.logic.delAnalysisProcess({ id: item.id }) : null
                              }
                              okText="是"
                              cancelText="否"
                              key="DeleteOutlined"
                              className={styles.iconHover}
                            >
                              <Text type="danger">删除</Text>
                            </Popconfirm>,
                          ]
                        : [
                            <span
                              key="copy"
                              onClick={() => this.logic.openOprationModel('copy', item)}
                              className={styles.iconHover}
                            >
                              复制
                            </span>,
                            <Text type="secondary" className={styles.iconHoverDisable}>
                              共享
                            </Text>,
                            <Text type="secondary" className={styles.iconHoverDisable}>
                              删除
                            </Text>,
                          ]
                    }
                  >
                    <div
                      onClick={() => {
                        this.logic.setTooltipVisibl('');
                        history.push(`/editingProcess/${item.id}`);
                      }}
                    >
                      <Card.Meta
                        className={styles.cardBady}
                        title={
                          <Text type="secondary" ellipsis={true} className={styles.textfont}>
                            <a> {item.name}</a>
                          </Text>
                        }
                        description={
                          <div className={styles.contentWrapper}>
                            <Tag color={'geekblue'} key="geekblue">
                              {`${item?.creatorEmpName}`}
                            </Tag>
                            <Text type="secondary">
                              {item.gmtCreate ? moment(item.gmtCreate).format(YYYY_MM_DD) : '-'}
                            </Text>
                          </div>
                        }
                      />
                    </div>
                  </Card>
                </Tooltip>
第一张是错位的样式,第二张是正常的

img

img

错位图片

img

希望各位指点一下

相关推荐 更多相似问题