import { StackProps , Text , Theme , isTamaguiElement , isWeb } from '@tamagui/core' ; import React from 'react' ; import { HoverablePopover , HoverablePopoverProps } from './HoverablePopover' ; import { Paragraph } from './Paragraph' ; import { YStack } from './Stacks' ; export type TooltipProps = Omit < HoverablePopoverProps , 'trigger' > & { contents ? : string | any ; tooltipFrameProps ? : Omit < StackProps , 'children' > ; } ; export const Tooltip = ( { contents , tooltipFrameProps , ... props } ) => { return ( < HoverablePopover placement = "bottom" delay = { 200 } disableUntilSettled { ... props } trigger = { ( triggerProps ) => isTamaguiElement ( props . children ) ? ( React . cloneElement ( props . children as any , triggerProps ) ) : ( < Text { ... ( isWeb && { fontFamily : 'inherit' , fontSize : 'inherit' , } ) } { ... triggerProps } > { props . children } < /Text>)}> { ( { open } ) => { return open ? ( < Theme name = "dark" > < YStack margin = { 10 } backgroundColor = "$bg2" paddingHorizontal = "$2" paddingVertical = "$2" maxWidth = { 400 } borderRadius = "$2" shadowColor = "$shadowColor" shadowRadius = { 2 } shadowOffset = { { height : 2 , width : 0 } } { ... tooltipFrameProps } > < Paragraph textAlign = "center" fontSize = { 14 } color = "$color" > { contents } < /Paragraph> < /YStack> < /Theme>) : null; } } < /HoverablePopover>); } ;