Tooltip changes the width of children components

[victorfunes]

• I have searched the Issues to see if this bug has already been reported
• I have tested the latest version

Steps to reproduce

      <div className="bg-gray-300 w-full">
        <Tooltip content="textWidth">
          <button type="button" className="w-full bg-blue-500 text-white px-2">
            Width test
          </button>
        </Tooltip>
      </div>

Generates this:

Without the tooltip:

      <div className="bg-gray-300 w-full">
        <button type="button" className="w-full bg-blue-500 text-white px-2">
          Width test
        </button>
      </div>

Generates this:

Current behavior

Now using the tooltip component changes the width of the children elements, and it shouldn't affect the style.

Expected behavior

The style of the Tooltip children components should be exactly the same than without the Tooltip.

[DavideFrancescon]

This is caused by the tooltip style and i'm sure is wanted.
Not always you set a div with size as the father of the tooltip, so when this is not present if it hasn't a w-fit, it's going to take up the entire page and cause issues. A solution would be to override the theme or add a className with w-full to override the w-fit.

[victorfunes]

Sorry, but I don't understand this behaviour as something wanted.
If you ask me what would I expect and desire from a Tooltip is that this component not affecting at all the screen and component design (as if it was not present).
Is there not a technical way to avoid the problem you mention without changing the children styles?

In my case, following your comment, I am going to use theme={{target: ""}}by the moment.
Thank you!

[tulup-conner]

I agree with you that this is not the behavior I would expect. I'm sure there is a reason we have w-fit as the default here for tooltip.target, but I don't know why. It would be helpful if you could try removing w-fit from the theme on a fork and see if it breaks any of our examples on the Tooltip docs unexpectedly. If not, then I can't really see a reason to not just remove the default w-fit from the default theme.

[DavideFrancescon]

Just tested in tailwind playground. I don't know if it's caused by tailwind or it's default html behavior, but the default behavior of a div is w-fit. So i'm pretty sure that just removing that won't change a thing.

[victorfunes]

Just if it could be useful for you: I changed in my application theme and everything that was broken after using Tooltips is working now.

  tooltip: {
    target: "", // To avoid changing children size as default theme is using w-fit
  },

[DavideFrancescon]

I guess i'll have to test everything then. I'll do it tomorrow and update you all on the results.

[DavideFrancescon]

@victorfunes @tulup-conner Removing the w-fit breaks everything. It might work in some cases, but not in all of them, so I'm sure that removing it will surely break some site using the default settings.

[victorfunes]

Thank you for your quick action and answer @DavideFrancescon

[tulup-conner]

Thanks. I'll convert this into a discussion for the future, then. This is probably a quirk with Floating UI, which we might be able to fix by moving w-fit further down the tree.

[MiroslavPetrik]

It affects me as well. Definitely the width: fit-content css rule. I need my children wrapped by Tooltip to be full-width as well.

[nardocesar]

I ran into the same issue and the workaround I found is customizing theme prop like this:

<Tooltip content="Tooltip content" theme={{ target: '' }}>

[Schabaani]

In 2026, same issue! theme={{ target: '' }} didn't work for me

export const Guard = ({
  disabled,
  tooltip,
  children,
}: PropsWithChildren<TProps>) => {
  const t = useTranslations();
  if (disabled) {
    return (
      <Tooltip content={tooltip ?? t('notAllowed')} theme={{target: ''}}>
        {children}
      </Tooltip>
    );
  }
  return children;
};