Tooltip
Attaches a popover to a target component. Built with DynamicPopover.
name | type | default | description |
|---|---|---|---|
| additionalGap | number | - | Add to the default gap between the popover and its target |
| align | "start" | "center" | "end" | - | Aligns the popover |
| background | "background" | "blue" | "indigo" | "purple" | "pink" | "red" | "orange" | "yellow" | "green" | "teal" | "grey" | "text" | "accent" | "border" | "blueSurface" | "indigoSurface" | "purpleSurface" | "pinkSurface" | "redSurface" | "orangeSurface" | "yellowSurface" | "greenSurface" | "tealSurface" | "greySurface" | "accentSurface" | "blueLight" | "indigoLight" | "purpleLight" | "pinkLight" | "redLight" | "orangeLight" | "yellowLight" | "greenLight" | "tealLight" | "greyLight" | "accentLight" | "blueBright" | "indigoBright" | "purpleBright" | "pinkBright" | "redBright" | "orangeBright" | "yellowBright" | "greenBright" | "tealBright" | "greyBright" | "accentBright" | "bluePrimary" | "indigoPrimary" | "purplePrimary" | "pinkPrimary" | "redPrimary" | "orangePrimary" | "yellowPrimary" | "greenPrimary" | "tealPrimary" | "greyPrimary" | "accentPrimary" | "blueDim" | "indigoDim" | "purpleDim" | "pinkDim" | "redDim" | "orangeDim" | "yellowDim" | "greenDim" | "tealDim" | "greyDim" | "accentDim" | "blueActive" | "indigoActive" | "purpleActive" | "pinkActive" | "redActive" | "orangeActive" | "yellowActive" | "greenActive" | "tealActive" | "greyActive" | "accentActive" | "backgroundPrimary" | "backgroundSecondary" | "textPrimary" | "textSecondary" | "textTertiary" | "textAccent" | "borderPrimary" | background | The background color for the tooltip |
| children * Required | ReactElement<any, string | JSXElementConstructor<any>> | - | The anchor element for the popover |
| content | ReactNode | - | A text or component containg the content of the popover. |
| hideOverflow | boolean | - | Hides the overflow of the content |
| isOpen | boolean | - | If this is not undefined, popover becomes externally controlled |
| mobilePlacement | "top" | "right" | "bottom" | "left" | top | The side and alignment of the popover in relation to the target on mobile screen sizes |
| placement | "top" | "right" | "bottom" | "left" | top | The side and alignment of the popover in relation to the target |
| onShowCallback | () => void | - | Function that will be called when the DynamicPopover is shown |
| mobileWidth | string | number | - | Width of the DynamicPopover on mobile |
| transitionDuration | number | - | The duration of the transition |
| useIdealPlacement | boolean | - | Dynamic popover will switch sides if there is not enough room |
| width | string | number | - | Width of the DynamicPopover |