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：

基於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

您實際上不需要爲此編寫自定義方法，react-bootstrap有內置退房的文檔：https://react-bootstrap.github.io/components.html#tooltips

你將不得不把<Tooltip/>元素在OverlayTrigger的overlay道具。

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()方法中未正確呈現或引用。