'How to change Position of ReactToolTip

I am using import ReactTooltip from 'react-tooltip'

The problem is, I don't know how to change position of the tooltip. Is there any default function?

I want output like shown in the below image.

<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

reactjstooltip


Solution 1:[1]

To add to the answers about offset, there is also an overridePosition method that can be used, see documentation on github.

I use this method to recalculate position of a large (as in having big content) custom tooltip like this;

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>
);

In my specific case I make sure that the tooltip displays as expected on small (mobile) devices.

Solution 2:[2]

You should add the offset property:

offset = "{'left': 60}"

Solution 3:[3]

I think you missing the offset attribute on the element. see the code below.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DaggeJ
Solution 2 Adrien Levert
Solution 3

Related Questions