如何更改 ReactToolTip 的位置

Question

我在用import ReactTooltip from 'react-tooltip'

问题是，我不知道如何更改工具提示的位置。有默认功能吗？

我想要如下图所示的输出。

<ReactTooltip 
    id='notificationClickme' 
    place='right' 
    effect='solid' clickable={true}
    delayHide={500}
    delayShow={500}
    delayUpdate={500}
    place={'bottom'}
    border={true}
    isCapture ={true}
    type={'light'}
    ref= { el => this.tooltip = el}
>
</ReactTooltip>

<div id="notificationIcon" className="notification cursor-pointer" 
data-tip data-for='notificationClickme' data-event='click'>Notification icon image</div>

目前我变得这样

我想要这样的输出

Answer 1

我认为您缺少元素上的 offset 属性。请参阅下面的代码。

<ReactTooltip id='notificationClickme' place='right' effect='solid' clickable={true}
                        effect='solid'
                        delayHide={500}
                        delayShow={500}
                        delayUpdate={500}
                        place={'bottom'}
                        border={true}
                        isCapture ={true}
                        type={'light'}
                        ref= { el => this.tooltip = el}
                        >

                    </ReactTooltip>


<div id="notificationIcon" className="notification cursor-pointer" data-tip data-for='notificationClickme' data-event='click' data-offset='left' > Notification icon image</div>