Feat/create tooltip component

[loiclaudet]

Purpose

The Tooltip component is a reusable component used in various area of the application, such as share data payment (step 5).

Testing from home page

update the home.tsx file as follow:

import { type FC } from 'react'
import { Community } from './community/community'
import { Interact } from './interact/interact'
import { Explore } from './explore/explore'
import './home.scss'
import './i18n/index'
import { Tooltip } from '@/ui/component/tooltip/tooltip'
import { Icon } from '@/ui/component/icon/icon'
import { useAppStore } from '@/ui/store'

export const Home: FC = () => {
  const theme = useAppStore(store => store.theme)

  return (
    <div className="okp4-dataverse-portal-home-page-main">
      <div className="okp4-dataverse-portal-home-page-block-container community">
        <Community />
      </div>
      <div className="okp4-dataverse-portal-home-page-block-container explore">
        <Explore />
      </div>
      <div className="okp4-dataverse-portal-home-page-block-container interact">
        <Interact />
      </div>
      <Tooltip
        content={
          <div>
            <p>
              This fee consists only of gas fees. This is an estimation based on the current network
              conditions and the complexity of the transaction. Please note: The gas fee ensures
              your transaction gets processed on the blockchain network. If the actual gas fees
              required exceed the estimated amount, the transaction will be declined. Otherwise, it
              will be validated. You will only be charged for the exact gas fees spent during the
              transaction. Additionally, the maximum processing time for a new block is 10 seconds.
              Your transaction will be included in an available block based on the gas price you
              choose. Make sure to review the gas price carefully to optimize transaction speed and
              costs.
            </p>
          </div>
        }
        contentClassName="my-custom-class-name"
        trigger={<Icon name={`info-outlined-${theme}`} />}
      />
    </div>
  )
}

Overview from Figma

[Yoj16]

Thanks for your testing code! Unfortunately, even if I set the .my-custom-class-name { width: 100px; } on home.css, the width is still the same as origin. Is it normal ? Look like we can't set the container 😊

[loiclaudet]

Unfortunately, even if I set the .my-custom-class-name { width: 100px; } on home.css, the width is still the same as origin. Is it normal ? Look like we can't set the container 😊

@Yoj16 thank you for your feedback!

The component updates dynamically the width of the content using custom properties:

Thus it takes precedence on the width defined in my-custom-classname:

However you can rely on max-width property to limit the tooltip to the size you want, that takes precedence on any width property.

[loiclaudet]

I think it's not user friendly that the users's width set in the content className isn't applied because of the radix priority.

@lolottetheclash thanks for your feedback.

In order to improve component usage, tooltip content CSS class has been updated, by replacing width by max-width. Thus, user can define a width from contentClassName, that overrides dynamic width provided by Radix CSS custom property, --radix-tooltip-content-available-width.

Also, a width props has been added to the component props, providing another level of customization.

Hope these changes are sufficient to provide enough flexibility and make this component easier to customize.