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>
내부에서만 왜 라이브러리가 마우스 오버시 도구 설명을 렌더링해야하는지 위치를 계산하지 못합니다.