fix: fix tooltip component positioning and add it to storybook

[Traxmaxx]

Problem

The tooltip is broken in a way that for unknown reasons classNames is not overriding classes properly. Taking the following component:

function Tooltip({
  children,
  top = 'md',
  align = 'left',
  width = 'md'
}: TooltipProps) {
  console.log(top, 'top');
  return (
    <div
      role="tooltip"
      className={classNames(
        'absolute left-6 top-24 z-[1000] hidden animate-fade-in-up items-center rounded-lg bg-black-900 px-4 py-2 text-xs font-medium text-black-200 opacity-0 peer-hover:flex',
        { 'top-0': top === 'xs' },
        { 'top-[3rem]': top === 'sm' },
        { 'left-auto right-0': align === 'right' },
        { 'w-72': width === 'lg' }
      )}
    >
      {children}
    </div>
  );
}

and using it as follows

<div className="relative">
  <WarningIcon className="peer" height="16" width="16" />
  <Tooltip top="xs" align="left" width="lg">
    Only AWS resources are currently supported on the explorer.
  </Tooltip>
</div>

renders the following HTML

and as you can see there is still the top-24 being applied and the top-0 is doing nothing.
Logging the top property shows that it is indeed passed in correctly:

However the rendering is completely off and not working as expected

Solution

I fixed the class composition and added some more properties to also allow it to be positioned from the bottom. I kept the current positioning syntax to not break existing tooltips throughout Komiser.

I also added a Storybook component since it was not super clear from the beginning on how to actually use the component. I hope that the Story makes this a bit more clear that you need to wrap the Tooltip inside a relative positioned container and that you need to have an peer element which works as a trigger for the tooltip to show!

Changes Made

• Fix the Tooltip component
• Add more options like bottom to allow all varieties of positioning
• Add Story for documentation purposes
• Use the new options in the dependency graph to have a properly positioned Tooltip

How to Test

Either check out the branch or check Storybook

Screenshots

Notes

None

Checklist

• Code follows the contributing guidelines
• Changes have been thoroughly tested
• Documentation has been updated, if necessary
• Any dependencies have been added to the project, if necessary

Reviewers

To be reviewed by code owners