Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Tooltip] Export TooltipArrowOwnProps

See original GitHub issue

Bug report

Current Behavior

Currently the TooltipContentOwnProps and TooltipTriggerOwnProps are exported, which is handy when typing exposed props that a custom implementation can override. However, it is necessary to “hand type” the Arrow props (i.e width, height, offset) because they are not exported.

Expected behavior

TooltipArrowOwnProps are exported to expose a consistent typing of the underlying primitive.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-tooltip	0.0.18

Issue Analytics

State:
Created 2 years ago
Comments:6

Top GitHub Comments

2reactions

mjoycecommented, Jun 17, 2021

Thanks for the help @benoitgrelard ! Taking a deeper look at the Polymorphic stuff. Awesome lib, thanks again!

0reactions

benoitgrelardcommented, Jun 17, 2021

@mjoyce thanks for the example! 🙏

If what you’re after is getting the “own” props for each part (not including the DOM attributes) then you should be able to use Polymorphic.OwnProps<typeof TooltipPrimitive.Content>, Polymorphic.OwnProps<typeof TooltipPrimitive.Arrow>, etc

This is the same utility we use internally ourselves. You can see on that link I posted earlier how it’s used.

Top Results From Across the Web

Creating custom Tooltip.Root component and maintaining types

Hello,. I'm creating a custom Tooltip.Root wrapper to set default props, and maintain prop autocomplete when consuming it, but am having ...

Styling the arrow on bootstrap tooltips - css - Stack Overflow

But i'm having troubles cause i can't find how to style tooltip small arrow. As shown on screenshot the arrow of the tooltip...

Storybook - react-laag

A tooltip is perhaps the most often used ui-pattern involving layers. react-laag exposes the right building blocks to create the perfect tooltip component...

How To Make an Extremely Reusable Tooltip Component ...

Tooltips are a fantastic way of adding context to a piece of UI. ... Custom properties (CSS vars) that control color, spacing and...

[airflow] 28/45: Improve grid rendering performance with a custom ...

+ */ + +/* Simplified version of chakra's Tooltip component for faster ... motion } from 'framer-motion'; + +export interface TooltipProps + extends ......