Tooltip

[blasterbug]

Hello,

Very great library and good job on the implementation and fully accessible!

I am wondering if you ever have considered adding a component for tooltips. In today applications tooltips are an essential component.
Essentially a Tooltip would be like a Popover to render, not a menu but just a piece of information. It could be triggered by a click (for instance on mobile) when the cursor is over it. I guess there is also some accessible concerns about setting up the proper aria roles, etc.

What do you think?

[divine]

Hello,

Have you seen this #436?

Thanks!

[blasterbug]

I did make my own tool tip using group and only tailwind classes. Though it's not accessible for screen readers.

<div className="relative group cursor-help">
<div
      className={classNames(
        'absolute hidden z-10 invisible opacity-0 group-hover:block group-hover:visible group-hover:opacity-95 group-focus:block  group-focus:visible group-focus:opacity-95 rounded-md py-2 px-4 shadow h-auto w-80 min-w-min transition-opacity delay-200 ease-in-out',
        {
          'bg-gray-50 text-current': color === 'light',
          'bg-gray-900 text-white': color === 'dark',
        },
        {
          'bottom-full left-1/2 transform -translate-x-1/2 -trasnlate-y-1':
            position === 'top',
          'top-full left-1/2 transform -translate-x-1/2 translate-y-1':
            position === 'bottom',
          'left-full top-1/2 transform translate-x-1 -translate-y-1/2':
            position === 'right',
          'right-full top-1/2 transform -translate-x-1 -translate-y-1/2':
            position === 'left',
        },
      )}
      role="tooltip"
    >
      <span className="text-xs">{children}</span>
    </div>
</div>