Bootstrap React懸停效果

我試圖反應bootstrap，因爲它支持工具提示以及！但是我仍然無法獲得期望的工具提示效果。該按鈕顯示正確的樣式，但鼠標懸停在按鈕上時沒有工具提示效果。

我的代碼：

import { Tooltip, OverlayTrigger, Button } from 'react-bootstrap' 

    const tooltip = (
     <Tooltip id="tooltip"><strong>Holy guacamole!</strong> Check this info.</Tooltip> 
    ); 


    export default function Test (props) { 
     return (
      <OverlayTrigger placement="right" overlay={tooltip}> 
       <Button bsStyle="default">Holy guacamole!</Button> 
      </OverlayTrigger> 
     )

來源

2017-10-10 jaimefps

爲什麼不試試[react-bootstrap]（https://react-bootstrap.github.io/components.html#tooltips）？這比使用bootstrap更具反應性。 –

你是否在'index.html'中導入了boostrap風格和js文件？ – cfraser

通過react-bootstrap，你所做的只是導入npm模塊，沒有CDN或腳本 – jaimefps

你需要指定覆蓋懸停的元素會被觸發。

像這樣：

<OverlayTrigger trigger="hover" placement="right" overlay={tooltip}> 
    <Button bsStyle="default">Holy guacamole!</Button> 
</OverlayTrigger>

你可以找到更多信息here。

來源

2017-10-11 01:28:15 Jalissa

我也試過，trigger = hover和trigger = click，沒有任何東西讓工具提示出現。 – jaimefps

@JaimePericas它似乎在工作。檢查它[這裏]（https://jsfiddle.net/jalissa/1f2c56ya/1/）。另外請記住react-bootstrap支持bootstrap 3，而在版本4中，bootstrap進行了一些類名更改，這可能會導致兼容性問題（發生在我身上的Modal），所以如果您使用的是版本4，那麼您可以使用https： //reactstrap.github.io/components/tooltips/ – Jalissa

Bootstrap React懸停效果

回答

相關問題