뒤로
박진호
·
자체적으로 만드는 라이브러리로 UI 를 만들고 있습니다.
Tooltip 을 만들어야 하는데
<Tooltip message="xxxxx">
<Button >a</Button>
</Tooltip>
이렇게 할까요?
<Button tooltip="xxxx">a</Button>
이렇게 할까요?
<Button tooltip-id="hw">a</Button>
<Tooltip id="hw">xxxxxxx</Tooltip>
요롷게 할까요?
흠 갈등이네요.
-------
tooltip 뜨는 레이어를 타겟의 상대로 넣을지
글로벌 좌표로 따로 뺄지도 고민이네요.
이지로직 스튜디오
CSS/SVG 기반 웹디자인 툴
2
댓글
로그인 후 댓글을 남길 수 있습니다.
단순한 툴팁이라면 <Button tooltip="xxxx">a</Button> 형태가 가장 좋은 API일 것 같으나, 툴팁이 복잡해지고 단순한 문자열을 넘어 컴포넌트가 들어가게 된다면 다른 형태를 취해야할 것 같습니다.
단순 메세지는 아니고 다른 컴포넌트들이 tooltip 에 들어갈 수는 있습니다.
<Tooltip message={[ <div>"fdsafdsfdf"</div>, <div>"fdsafdsfdf"</div>, <div>"fdsafdsfdf"</div>, ]} position={direction} show={true}> <Button>{direction.toUpperCase()}</Button> </Tooltip> 형태로 먼저 잡아 보았습니다. 사용하는 패턴에서 Button 에 추가 기능을 다시 넣어야 할지 아니어야할지 고민을 많이 했는데 일단 랩핑을 해야 기존 기능에 영향을 안주고 할 수 있을 것 같네요.
저희는 대략 이런 식으로 툴팁을 만들었어요 ㅎㅎ <Tooltip text={isMaker ? '메이커' : '작성자'} small topPosition={4}> <div className='tag-icon-wrapper'> {isMaker ? <StyledMakerTagIcon /> : <StyledUploaderTagIcon />} </div> </Tooltip>
툴팁으로 감싸는군요. 이건 어떤 라이브러리 쓰시나요?
아 라이브러리는 아니고 저희가 자체적으로 만들었어요!