📖

Update |

🔍 How To Use

import {  } from "mcm-js";
    
export default function ExamplePage() {
  return (
     tooltipText="World"
  );
}

📝 Example

기본 (Basic)

  return (
     
  );

  return (
     
      
    
  );

애니메이션 (Animation) 적용

  return (
     tooltipText="World" 
  );

  return (
     
      tooltipText={<img src="이미지 주소" />}
      
    
  );

방향 (Position) 설정

  return (
    
      tooltipText="top position"
      useShowAnimation={true}
       // 생략 가능
    
  );

  return (
    
      tooltipText="right position"
      useShowAnimation={true}
       
    
  );

  return (
    
      tooltipText="bottom position"
      useShowAnimation={true}
       
    
  );

  return (
    
      tooltipText="left position"
      useShowAnimation={true}
       
    
  );

스타일 지정 (웹, 모바일)

  return (
    
      tooltipText="New Style Tooltip"
     
    
  );

  return (
    
      tooltipText="New Mobile Style Tooltip"
     
   
  );

수동 ON/OFF & Hover 이벤트 비활성화

  // Tooltip을 실행하거나 종료시키는 기준이 되는 state 값입니다.
  // true를 전달하면 실행시킬 수 있고, false를 전달하면 종료됩니다.
  const [isOpen, setIsOpen] = useState(false);
    
  // isOpen state 값을 true 또는 false로 변경합니다.
  const toggleIsOpen = () => {
    setIsOpen((prev) => !prev);
  }; 

  // Tooltip이 종료되었을 때 state 값을 false로 변경하는 함수입니다.
  const closeAfterEvent = () => {
    setIsOpen(false);
  }; 
      
  return (
    <div> 
      <button onClick={toggleIsOpen}> 
        Tooltip 실행 / 종료
      </button>
      <Tooltip 
        tooltipText="Tooltip이 실행되었습니다."
        useShowAnimation
        // isOpen 값이 true일 때 Tooltip이 수동으로 실행됩니다.
        open={isOpen}
        // Tooltip이 종료되면 isOpen state 값을 false로 변경해주는 함수가 실행됩니다.
        
      >
        <p> 버튼을 클릭하면 Tooltip을 수동으로 실행하거나 종료할 수 있습니다. </p>
      </Tooltip>
    </div>
  );

  // Tooltip을 실행하거나 종료시키는 기준이 되는 state 값입니다.
  // true를 전달하면 실행시킬 수 있고, false를 전달하면 종료됩니다.
  const [isOpen, setIsOpen] = useState(false);
    
  // isOpen state 값을 true 또는 false로 변경합니다.
  const toggleIsOpen = () => {
    setIsOpen((prev) => !prev);
  }; 

  // Tooltip이 종료되었을 때 state 값을 false로 변경하는 함수입니다.
  const closeAfterEvent = () => {
    setIsOpen(false);
  }; 
      
  return (
    <div> 
      <button onClick={toggleIsOpen}> 
        Tooltip 실행 / 종료
      </button>
      <Tooltip 
        tooltipText="Tooltip이 실행되었습니다."
        useShowAnimation
        // isOpen 값이 true일 때 Tooltip이 수동으로 실행됩니다.
        open={isOpen}
        // Tooltip이 종료되면 isOpen state 값을 false로 변경해주는 함수가 실행됩니다.
        
        // Tooltip 실행 및 종료 마우스 Hover 이벤트를 비활성화합니다.
        
      >
        <p> 마우스 Hover 이벤트가 비활성화 되었습니다. </p>
      </Tooltip>
    </div>
  );

Tooltip 고정 (Fix)

  return (
    
      tooltipText="고정된 Tooltip 입니다." 
      open={true}
      
    
  );

Tooltip 완전 비활성화 (Disable) 적용

  // Tooltip의 활성화 또는 비활성화의 기준이 되는 state 값입니다.
  const [isDisable, setIsDisable] = useState(false);
  
  // isDisable state 값을 true 또는 false로 변경합니다.
  const toggleDisable = () => {
    setIsDisable((prev) => !prev);
  }; 
    
  return (
    <div> 
      <button onClick={toggleDisable}> 
        Tooltip 활성화 / 비활성화
      </button>
      <Tooltip 
        tooltipText="활성화 상태입니다."
        // isDisable state값이 true라면 Tooltip이 실행되지 않습니다.
        
      >
        <p> 활성화 상태에서만 Tooltip이 실행됩니다. </p>
      </Tooltip>
    </div>
  );

모바일 OFF

  return (
    
      tooltipText="모바일에서는 보이지 않습니다." 
      offHoverEvent={true}
      open={true}
      
    
  );

❗ 모듈 호출시 에러 발생 예시

📤 Props List

필수 Props

Props List
이름	설명	기본값 (Type)
children	Tooltip 메세지를 적용시킬 문자열 또는 컴포넌트를 적용합니다. 적용된 대상에 마우스를 올리거나 터치하면 Tooltip 메세지를 출력할 수 있습니다.	"" (String \| Node)
tooltipText	Tooltip 메세지를 출력시킬 문자열 또는 컴포넌트를 전달합니다.	"" (String \| Node)
id	모듈에 id 선택자 값을 지정합니다. id는 wrapper 태그에 적용됩니다.	"" (String)
className	모듈에 class 선택자 값을 지정합니다. className은 wrapper 태그에 적용됩니다.	"" (String)
useShowAnimation	애니메이션 적용 여부를 결정합니다. true를 전달하면 Tooltip 실행 및 종료시 애니메이션 효과가 부여됩니다.	false (Boolean)
position	Tooltip이 실행되는 방향을 지정합니다. "top", "bottom", "left", "right"를 전달해 원하는 방향을 지정할 수 있습니다.	"top" (String)
tooltipStyles	Tooltip 메세지의 스타일을 직접 지정할 수 있습니다. backgroundColor : Tooltip의 배경색을 설정합니다. padding : Tooltip의 padding 스타일을 설정합니다. font : Tooltip 메세지의 스타일을 설정합니다. border : Tooltip 테두리의 스타일을 설정합니다.	{ backgroundColor : "", padding : "", font : {}, border : {} } (Object)
tooltipMobileStyles	모바일 환경(767px 이하)부터 적용되는 Tooltip 메세지의 스타일을 직접 지정할 수 있습니다. "tooltipStyles" props와 동일한 데이터 타입을 가집니다.	{ backgroundColor : "", padding : "", font : {}, border : {} } (Object)
isDisable	Tooltip의 활성화/비활성화 여부를 결정합니다. true를 전달하면 비활성화가 적용되며, 비활성화된 Tooltip은 작동하지 않습니다.	false (Boolean)
open	Tooltip의 오픈/종료 여부를 결정합니다. true를 전달하면 수동으로 Tooltip을 실행할 수 있습니다. "isDisable"가 true를 전달할 경우 실행되지 않습니다	false (Boolean)
onOpenAfterEvent	Tooltip이 실행된 이후에 실행할 함수를 전달할 수 있습니다.	( ) => { } (Function)
onCloseAfterEvent	Tooltip이 종료된 이후에 실행할 함수를 전달할 수 있습니다. "open" props를 사용할 때 함께 사용하는 것을 권장합니다.	( ) => { } (Function)
offHoverEvent	true를 전달하면 Tooltip을 실행하거나 종료하는 Hover 이벤트를 비활성화합니다. "open" props를 함께 사용하여 Tooltip을 실행하거나 종료할 수 있습니다.	false (Boolean)
isFix	true를 전달하면 종료되지 않는 Tooltip을 나타낼 수 있습니다. "open" props를 함께 사용하면 고정된 Tooltip을 표현할 수 있습니다.	false (Boolean)
hideMobile	true를 전달하면 모바일 환경(767px 이하)에서는 Tooltip을 숨길 수 있습니다.	false (Boolean)

📂 Module Tree

태그를 클릭해보세요.