Black area blinks in the beginning and tooltip quick appearance/disappearance

[kokushkin]

Hi! My use case is to show the tooltip when I click and I want it to disappear when I leave the field.

When I load the page I see this

Then it disappears (black area of ReactTooltip) in some time.

          <input
                name={props.name}
                type={isOpenEye ? "password" : "text"}
                placeholder={props.placeholder}
                onChange={props.onChange}
                onBlur={props.onBlur}
                value={props.value}
                data-for="happyFace"
                data-tip
            />
            <ReactTooltip
                id="happyFace"
                place="top"
                effect="solid"
                event="click focus"
                globalEventOff="click"
            >
                {"AAAAAAAAAAAAAAAAAAAAAAA"}
            </ReactTooltip>

This's what I used from react-tooltip

Also, when I click the tooltip is appears and then it disappears in 0.1 sec or so

I tried many things and got all sort of buggy behaviors. I fix one of them and then something else shows up. Probably it doesn't work well with the code that I already have but it's absolutely no clear.

Am I doing something wrong in the way how I use the library?