Intro

리스트형 목록 화면에서 이름이 긴 value에 대해서는 일정 길이 이상이 되면 ... 표출 후 tooltip으로 value 값을 표출하는 것을 했다.

value 제한

const test = [
  {id: 0,
   name: kim,
   city: 서울특별시 마포구 연남동
  },
  {id: 1,
   name: lee,
   city: 서울특별시 송파구 가락동
  },
  {id: 2,
   name: han,
   city: 서울특별시 도봉구 쌍문동
  }
];

<div>
  		{test.city.substr(0, 7) + "..."} // 원하는 만큼 길이 제한
</div>

tooltip 적용

tooltip 설치

$ npm install react-tooltip

적용

아래에서 핵심은 아래이다. 아래를 해주지 않으면 모든 data가 한번에 뜨는 오류가 있었다.

data-html={true} data-tip={test.city}

import ReactTooltip from "react-tooltip";

 <div data-html={true} data-tip={test.city} data-for="cityTip">
  		{test.city.substr(0, 7) + "..."}
  		<ReactTooltip id="cityTip" place="top" effect="solid" multiline={true}/>
  </div>

길이가 길은 value값에만 tooltip 적용

위와 같이 적용하면 길이가 짧아도 tooltip이 적용된다. 좀 더 깔끔하게 길이가 길은 value값에만 tooltip을 적용을 아래와 같이 조건을 적용하면 된다.

{
  test.city.length > 7
 ?
    <div data-html={true} data-tip={test.city} data-for="cityTip">
      	{test.city.substr(0, 7) + "..."}
      	<ReactTooltip id="cityTip" place="top" effect="solid" multiline={true}/>
    </div>
:
  	<div>
    	{test.city}
	</div>
}

참고

• https://github.com/wwayne/react-tooltip#readme