Radix UI is a popular React library to build accessible products. Here is a neat tip I found very useful.
Group tooltips
Use TooltipProvider
to group all tooltips together, to get a better transition experience. See my demo (The brand color example isn’t grouped, the background color example is grouped)👇
Code example:
export function BackgroundColor() {
return (
<div>
// ✅ Lift it here
<TooltipProvider>
<ul className="flex flex-wrap gap-x-6 gap-y-4">
{COLORS.map(({ name, className, hex }) => (
<li key={name}>
// ❌ Don't use TooltipProvider here
<Tooltip>
<TooltipTrigger
className={clsx(
'h-7 w-7 rounded-sm border',
FOCUS_RING_ERROR_SHADOW_XS,
className,
)}
type="button"
/>
<TooltipContent>
<p className="pb-1.5 text-xs font-medium text-gray-500">
{name}
</p>
<p className="text-sm font-semibold text-gray-600">{hex}</p>
</TooltipContent>
</Tooltip>
</li>
))}
</ul>
</TooltipProvider>
</div>
);
}
Thanks to RadixUI’s consistency, this tip can be applied to many other Radix components as well, for example: hover-card.
Engineering
Create your blogs directly from Apple Notes.
Say goodbye to complex CMS updates and management issues!
You focus on creating quality content while Quotion takes care of the rest.
Latest
More from the blog
Qing
Launch your blog from Apple Notes in 4 simple steps
Do you know that you can turn Apple Notes into web pages? With Quotion, it's not only possible, but also surprisingly simple! In this tutorial, I'll walk you through the process of transforming your notes into blog posts using Quotion. TLDR 1. Sign up with Quotion First of all, you'll need a Quotion account.
Read post
Qing
ProductUpdate
Password protection
We're so excited to introduce a highly request feature: password protection! You can protect your whole site with a single password. Your site visitors must enter the password, then they can access all pages until they refresh the page, which will ask them to enter the password again. Demo Check out this live demo: How
Read post
Qing
ProductUpdate
Custom CSS is available in the Lite plan
Previously, custom CSS was only available in the Pro+ plan. Since many of our customers are coming from WordPress, which includes custom CSS in the entry-level plan, they expect Quotion to have a similar feature. Therefore, we have included this feature in the Lite plan to help them migrate to Quotion more smoothly. If
Read post