React material UI를 이용해 커스텀 툴팁 만들기

React material UI 의 문서를 읽어보고 

툴팁 내부에 html로 삽입이 가능한 tooltip UI를 제작했다.

 

 

 

https://material-ui.com/components/tooltips/#customized-tooltips

를 이용했다.

 

clickawaylistener를 이용하면 요소의 바깥쪽 클릭 감지가 매우 깔끔하게 되는 점이 좋아서 

구글링+ API문서를 참고하여 제작함

툴팁 요구사항이 내부의 요소가 a태그도 들어가야했고, 모바일에서 마우스오버한다고 

길게 클릭하면 깔끔하게 작동하지 않게 되므로 마우스오버가 아닌 버튼으로 제작했고 

문서를 참고해 마우스오버 툴팁으로도 제작이 가능하다.

뜯어보면 open 변수 토글로 간단히 제어되는 툴팁임

 

 

---

    *** 툴팁사용법 ***

    title: 툴팁 내부의 텍스트, html방식으로 들어가기 때문에 a태그나 {}문법 사용가능

    btnClass :버튼 클래스 (버튼 스타일 적용시)

    btnwrapClass : 버튼 감싸는 span 클래스

    placement='bottom-end' : 위치

    interactive : 툴팁에 마우스 오버했을때 없어지지 않도록 만들어 줌

 

import Tooltip from '@material-ui/core/Tooltip'
import { withStyles } from '@material-ui/core/styles';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';

const DefaultTooltip = (props) => {
    const HtmlTooltip = withStyles(theme => ({
        tooltip: {
          backgroundColor: '#fff',
          color: '#262626',
          borderRadius:0,
          maxWidth: 620,
          border: '1px solid #595959',
        },
      }))(Tooltip);

    const title = props.title
    const buttonText = props.buttonText
    const btnwrapClass = props.btnwrapClass
    const btnClass = props.btnClass

    const [open, setOpen] = React.useState(false);

    const handleTooltipClose = () => {
        setOpen(false);
    };

    const handleTooltipOpen = () => {
        setOpen(true);
    };

    return (
        <>  <ClickAwayListener onClickAway={handleTooltipClose}>
                <HtmlTooltip
                    title={
                        <React.Fragment>
                            {title}
                        </React.Fragment>
                    } 
                    placement='bottom-end'
                    interactive
                    disableFocusListener
                    disableTouchListener
                    disableHoverListener
                    onClose={handleTooltipClose}
                    open={open}
                >
                    <span className={`defaulttooltip ${btnwrapClass}`}>
                        <button 
                            className={btnClass} 
                            onClick={handleTooltipOpen}
                            >
                            {buttonText}
                        </button>
                    </span>
                </HtmlTooltip>
            </ClickAwayListener>
        </>
    )
}

export default DefaultTooltip