Можно ли отображать всплывающую подсказку Ant Design только при наличии многоточия?

Question

Я использую компонент Ant Design <Paragraph>, чтобы показать текст с переменным размером, и я использую многоточие, чтобы показать "...", когда этот текст превышает длину своего контейнера.

Я также добавил <Tooltip> к этому <Paragraph>, чтобы показать весь текст, когда он свернут:

<Tooltip title="This text is displayed, so I don't want to show a tooltip.">
  <Paragraph ellipsis>
    This text is displayed, so I don't want to show a tooltip.
  </Paragraph>
</Tooltip>

К сожалению, я не могу найти способ узнать, когда многоточие появляется на абзац, поэтому моя всплывающая подсказка всегда отображается.

Можно ли отобразить всплывающую подсказку Ant Design, только если на содержание влияет параметр многоточия

Answer 1

Я не знаю об antdegin, но однажды я столкнулся с этой проблемой, и мне удалось ее решить.

Чтобы узнать, переполнен ли текстовый тег, эта проверка будет верной:

element.offsetWidth < element.scrollWidth.

Я пытался придумать универсальный c способ решения этой проблемы и в итоге получил этот компонент (он еще не готов к работе!)

function SmartText({
  TypographyComponent = "h1",
  TypographyComponentProps = {},
  TooltipComponent = ({ children }) => children, // just for demo purpose, it will do nothing basically if not passed
  ToolTipComponentProps = {},
  children = ""
}) {
  const textComponentRef = React.useRef(null);
  const [tooltipTitle, setTooltipTitle] = React.useState("");

  React.useEffect(() => {
    if (
      textComponentRef.current &&
      textComponentRef.current.offsetWidth <
        textComponentRef.current.scrollWidth
    ) {
      setTooltipTitle(textComponentRef.current.innerText);
    }
  }, [children]);

  return (
    <TooltipComponent {...ToolTipComponentProps} title={tooltipTitle}>
      <TypographyComponent {...TypographyComponentProps} ref={textComponentRef}>
        {children}
      </TypographyComponent>
    </TooltipComponent>
  );
}

The TypographyComponent в вашем случае это Paragraph, чтобы использовать этот метод, TypographyComponent должен перенаправить ссылку или поддержать ее.

Я использовал подсказку SmartText с @ material-ui следующим образом:

<SmartText
  TypographyComponentProps={{
    style: {
      whiteSpace: "nowrap",
      maxWidth: 500,
      textOverflow: "ellipsis",
      overflow: "hidden",
      textAlign: "left"
    }
  }}
  TooltipComponent={Tooltip}
  ToolTipComponentProps={{
    placement: "right"
  }}
>
  Tooltip is needed because this text is long
</SmartText>
<SmartText
  TypographyComponentProps={{
    style: {
      whiteSpace: "nowrap",
      maxWidth: 300,
      textOverflow: "ellipsis",
      overflow: "hidden",
      textAlign: "left"
    }
  }}
  TooltipComponent={Tooltip}
  ToolTipComponentProps={{
    placement: "right"
  }}
>
  No tooltip needed
</SmartText>

Наконец, вот рабочие коды и демоверсия коробки