如何更改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>

currently i am getting like this

And ouput i want like this

Answer 1

您应该添加offset属性：

offset = "{'left': 60}"

Answer 2

要补充关于offset的答案，还可以使用一个overridePosition方法，请参阅documentation on github。

我使用这个方法来重新计算一个大的(就像在有大的内容)自定义工具提示的位置，就像这样；

interface Position { left: number; top: number; }
const calculateNewPosition = (pos: Position): Position => {
    const newPosition = { top: window.innerHeight < topOverrideTreshold ? 120 : pos.top, left: window.innerWidth < 440 ? 10 : pos.left };
    return newPosition;
};

return (
    <ReactTooltip
        id={id}
        type="light"
        effect="solid"
        aria-haspopup="true"
        className="custom-tooltip"
        isCapture
        border
        overridePosition={calculateNewPosition}
    >
        <span className="header-container">
            <img src={informationCircle} className="header-icon" />
            <span>{header}</span>
            {isMobile || isTablet ? <span className="stb-sprite-small remove close-icon" onClick={onHide} aria-hidden="true" /> : ""}
        </span>
        <p>{firstParagraph}</p>
    </ReactTooltip>
);

在我的特定情况下，我确保工具提示在小型(移动)设备上按预期显示。

Answer 3

我想您遗漏了元素的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>