재료 UI 툴팁을 조건부로 활성화하시겠습니까?

재료 UI 툴팁을 조건부로 활성화하시겠습니까?

재료 UI를 사용하여 다음과 같은 React 구성 요소가 있습니다.

const MyButton = ({ warningText }) => (
    <Tooltip title={warningText}>
        <Button>Do action</Button>
    </Tooltip>
)

현재 이 화면에는 다음과 같은 빈 툴팁이 표시됩니다.warningText정의되어 있지 않습니다.대신 툴팁은 일절 보여주고 싶지 않습니다.이러한 경우 조건부로 툴팁을 누르는 방법이 있습니까?

물론 툴팁 컴포넌트를 렌더링하지 않기 위해 if 문을 사용할 수도 있지만, 제 의견으로는 다소 추악한 코드가 될 수 있습니다.

그래야 한다

 <Tooltip title={warningText == null ? "" : warningText}>
        <Button>Do action</Button>
 </Tooltip>

문자열 길이가 0이면 표시되지 않는다고 합니다.

https://material-ui.com/api/tooltip/

툴팁 제목제로 길이의 타이틀 문자열은 표시되지 않습니다.

커스터마이즈를 위해서 수동으로 조작하는 경우는, 다음의 솔루션을 사용해 주세요.

설명서에 따르면open prop및 마우스events수작업으로 처리할 수 있습니다.

다음의 시나리오에서는,state툴팁을 표시하도록 설정합니다.element또,text &&단언하다text값이 있습니다.이것에 의해, 툴 팁은, 다음의 타이밍을 표시할 수 없게 됩니다.text이undefined.

const [showTooltip, setShowTooltip] = useState(false);
<Tooltip
    open={text && showTooltip}        
    onMouseEnter={() => { setShowTooltip(true) }}
    onMouseLeave={() => { setShowTooltip(false) }}
    placement="top" title={text}
>
    <div>
        {text}
    </div>
</Tooltip>

mui-tooltip은 처음부터 완벽한 컴포넌트가 아니며 매우 간단한 것도 아닙니다.이 솔루션은 저에게 효과가 있지만, 고객님의 상황에서는 작동하지 않을 수 있습니다.제가 꺼낼 테니 고객님의 입장에서 작동하도록 노력해 보세요.

그래도 안 되면 댓글로 남겨주시면 제가 도와드리겠습니다.

https://material-ui.com/api/tooltip/ 를 참조해 주세요.

다음과 같은 옵션이 있습니다.

• disableFocusListener
• disableHoverListener
• disable Touch Listener
• 상호적인

생각합니다interactive={true}니즈에 가장 적합해야 한다

<Tooltip title={warningText} interactive={!warningText}>...</Tooltip>

언급URL : https://stackoverflow.com/questions/53591747/conditionally-activate-material-ui-tooltip