Added custom tooltip to `Table` and `ResultsetTable`

[Mil4n0r]

Checklist

• [x] Build process is done without errors. All tests pass in the /lib directory.
• [x] Self-reviewed the code before submitting.
• [x] Meets accessibility standards.
• [x] Added/updated documentation to /website as needed.
• [ ] Added/updated tests as needed.

Description After adding the new Tooltip component, it is required to use it instead of title in the Table and ResultsetTable components.

Related to #1968

[Mil4n0r]

Closed until Tooltip component lifecycle status is New.

[Mil4n0r]

It may be inconvenient to add this feature, as it is overlapping the Dropdown content. I will investigate further

[Mil4n0r]

Reopened with new solution to handle the overlapping of the tooltip with the Dropdown

[Mil4n0r]

Hey @GomezIvann , I am facing a quite specific problem here.

As you already know, our DxcTooltip currently looks like this

You may be tempted to remove <TooltipTriggerContainer> and just leave it as <>{children}</> as that would make much more sense.

However, this wouldn't work due to a limitation which is explained here: https://www.radix-ui.com/primitives/docs/guides/composition#your-component-must-forward-ref and here https://github.com/radix-ui/primitives/discussions/1166

The thing is that, in order to use a React Component as a direct child, it is needed that it provides a forwardRef. This is not a good approach as forwardRef will be removed from React soon, so our current workaround was to use this styled component as a parent, which was covering all the cases until now.

The problem comes in this scenario:

If we use DxcTooltip inside Dropdown like this, it won't work, because Popover.Trigger is expecting a button as a children (with the aria-haspopup, disabled, onClick, etc. As DxcTooltip is just a div/span, it won't bind properly as a trigger and won't be working.

On the other hand, we could do this (moving down one level the tooltip):

In this case, the functionality itself works as expected, the problem is that it messes up our styles for the Dropdown, due to DropdownTrigger expecting 2 children to justify the content with space-between, adding the gaps, etc.

Do you have an idea on how to maintain the exact same layout as the current version but adding the tooltip?