3 ms·
This is insanely verbose just for a button with a tooltip: import { Button } from "@/components/ui/button" import { Tooltip, TooltipContent, To
by kazinator 19d ago
This is insanely verbose just for a button with a tooltip:
import { Button } from "@/components/ui/button"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"
export default function TooltipDemo() {
return (
<TooltipProvider>
<Tooltip>
<TooltipTrigger render={<Button variant="noShadow" />}>
Hover
</TooltipTrigger>
<TooltipContent>
<p>Add to library</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
)
}
Contrast with plain old HTML form button where the title attribute gives the tooltip text:
<button type="submit" title="Add to library!">Hover</button>
- Waterluvian 19d agoYeah but can your tooltip render in neon brown?
- kazinator 19d agoNot sure; it may be doable remotely with some CSS, in which case it would be a few lines of code for any number of buttons.
- Waterluvian 19d agoJoking aside, I don’t believe you can and I’m fine with that. It’s still so much simpler and predictable.
- kazinator 19d agoI do have a vague memory of working with tooltips intensively (the above kind with title attributes on form elements) and there not being a lot of flexibility.
- sph 19d agoHaven’t you heard that you’re not supposed to type code anymore?
- kazinator 19d agoYou probably mean, haven't I heard that you're not supposed to look at code any more. Mainly, looking at it is the problem. Decades old copy-paste editing techniques get around the typing.