React-bootstrap 툴팁이 실행되지 않음

Question

사용자가 TD 셀 위로 마우스를 가져 가면 툴팁이 표시되는 코드가 있습니다.

import { DropdownButton, Tooltip } from 'react-bootstrap'; 

... 

$(e.currentTarget).parent().prev().hover(() => { 
    this.showTooltip(tooltipContent); 
}); 

... 

showTooltip(tooltipContent) { 
    console.log(tooltipContent); 
    return (
     <Tooltip placement="top" className="in" id="tooltip-top"> 
      tooltipContent 
     </Tooltip> 
    ); 
} 

console.log에 올바른 텍스트가 표시되지만 툴팁이 표시되지 않으며 콘솔에 오류가 없습니다. 구성 요소를 올바르게 호출합니까? 도와주세요!

UPDATE :

한 답변에 따라, 나는 변경이 내 코드 :

import { DropdownButton, OverlayTrigger, Tooltip } from 'react-bootstrap'; 

showTooltip(tooltipContent) { 
    console.log(tooltipContent); 
    const tooltip = <Tooltip />; 
    return (
     <OverlayTrigger placement="top" overlay={tooltip}> 
      <span>tooltipContent</span> 
     </OverlayTrigger> 
    ); 
} 

호출 기능은 동일합니다

$(e.currentTarget).parent().prev().hover(() => { 
    this.showTooltip(tooltipContent); 
}); 

하지만 난 여전히 표시되지 않습니다 모든 도구 설명 ..

Answer 1

실제로 사용자 정의 방법을 작성할 필요는 없습니다. 반응 부트 스트랩 내장이가있는 문서를 체크 아웃 :. 당신은 OverlayTrigger의 overlay 소품으로 <Tooltip/> 요소를 넣어해야합니다 https://react-bootstrap.github.io/components.html#tooltips

합니다.

var tooltip = <Tooltip />; 
// ... 
<OverlayTrigger placement="left" overlay={tooltip}> 
    <td>Holy guacamole!</td> 
</OverlayTrigger> 

또는 그 레이아웃을 나누기 경우 :

var tooltip = <Tooltip />; 
// ... 

<td> 
    <OverlayTrigger placement="left" overlay={tooltip}> 
    Holy guacamole! 
    </OverlayTrigger> 
</td> 

이 코드는 render() 방법으로해야 할 것이다. 지금 당장 당신이하는 일은 단지 return JSX 요소가 아무 곳에도 없다는 것입니다. 그래서 툴팁이 나타나지 않습니다. 구성 요소의 render() 메서드에서 제대로 렌더링되거나 참조되지 않습니다.