How to change Position of ReactToolTip

Question

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

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