Tooltip shape distortion upon card hover with scale: 1.1+ applied.

[haiderhossain10]

Tooltip Distortion on Scaled Card Hover

Problem: Tooltip appears distorted when hovering over a card that has been scaled by 1.1 or more.

• JSX code snippets:

<div className="flex items-center justify-between w-full">
    <div>
        <p className="text-sm leading-[191%] text-ui-theme-2 font-normal">
            {data.name}
        </p>
        <h4 className="text-[12px] leading-[191%] text-ui-theme-2 font-semibold">
            {data.netflix}
        </h4>
    </div>
    <div
        data-tooltip-id="testimonial-tooltip"
        data-tooltip-content={data.feedbackForm}
                        >
        <Image
            height={40}
            width={40}
            className="h-10 w-10"
            src={data.iconUrl}
            alt="icon"
                            />
    </div>
</div>
<Tooltip
    id="testimonial-tooltip"
    className="font-normal font-neue !bg-ui-theme-2 "
/>

• CSS code snippets:

.ui-testimonial-2 .swiper-slide-active {
    transition: all 0.4s ease-in-out;
}
.ui-testimonial-2 .swiper-slide-active:hover {
    scale: 1.1;
}

[gabrieljablonski]

Try putting the <Tooltip /> component inside of a portal.

We already have plans to do this internally (see #1163), but currently you're going to need to do it manually.

Please let us know if that solves the problem for you.