リアブートストラップのツールチップが起動しない

Question

私はここにコードを1つ持っています。ユーザーが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：

1件の回答に基づいて、私は変更され、これに私のコード：

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

実際には、反応メソッドストラテジを作成する必要はありません。https://react-bootstrap.github.io/components.html#tooltips

あなたはOverlayTriggerにoverlay小道具として<Tooltip/>要素を配置する必要があります：内蔵のドキュメントをチェックアウトすることがあります。

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()メソッドでレンダリングまたは参照されません。