2017-09-29 4 views
0

React v15.6.2 (및 v16) 및 [email protected] (현재 v1.0.0-beta.12)을 사용하여 테이블 헤더 내에 <Tooltip> 구성 요소를 사용할 때마다 툴팁 렌더링 페이지의 왼쪽 상단 모서리에서 <Tooltip>으로 감싸는 요소 옆에있는 대신에 해제하십시오. 툴팁을 테이블 바디 또는 코드의 다른 곳에 잘라내거나 붙여 넣으면 의도 한대로 작동합니다.React material-ui @ next TableHead의 툴팁이 요소 옆에 렌더링되지 않습니다.

편집 : '툴팁 렌더링'이라고 말하면 <Tooltip> 안에 감싸 여진 요소 위에 마우스를 가져갈 때 표시되는 요소를 의미합니다. 나는이 문제가 있었다 해결할 수 있었다

<Table> 
    <TableHead> 
    <TableRow> 
     <TableCell> 
     <span>Column Name That Requires Help Tooltip</span> 

     // this tooltip renders off in the top left corner of the screen 
     <Tooltip id='help' title='Info About This Column'> 
      <HelpIcon /> 
     </Tooltip> 

     </TableCell> 
    </TableRow> 
    </TableHead> 
    <TableBody> 
    // Tooltip works as intended in any cell in the body 
    </TableBody> 
</Table> 

유일한 방법 : 여기 <TableCell>

의 텍스트 미세 옆에 표시 아래에있는 내 예제에서 <HelpIcon />는 제가 함께 일하고 있어요의 예 더 이상 테이블처럼 보이지 내 최종 결과를 만든 방법으로 CSS 주위에 해킹 내가 옆을 강제로 툴팁의 절대 위치를 오버라이드 (override)을 시도 할 수 있다는

내가 가진 또 다른 생각을 (즉 display: table-header-group 제거 등) 그것을 산란하는 요소에,하지만 나는 <TableHead> 내부에서만 왜 라이브러리가 마우스 오버시 도구 설명을 렌더링해야하는지 위치를 계산하지 못합니다.

답변

관련 문제