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" | "accent" | "blue" | "green" | "yellow" | "red" | "orange" | "indigo" | "pink" | "purple" | "grey" | "accentActive" | "accentDim" | "accentPrimary" | "accentBright" | "accentLight" | "accentSurface" | "blueActive" | "blueDim" | "bluePrimary" | "blueBright" | "blueLight" | "blueSurface" | "greenActive" | "greenDim" | "greenPrimary" | "greenBright" | "greenLight" | "greenSurface" | "yellowActive" | "yellowDim" | "yellowPrimary" | "yellowBright" | "yellowLight" | "yellowSurface" | "redActive" | "redDim" | "redPrimary" | "redBright" | "redLight" | "redSurface" | "orangeActive" | "orangeDim" | "orangePrimary" | "orangeBright" | "orangeLight" | "orangeSurface" | "indigoActive" | "indigoDim" | "indigoPrimary" | "indigoBright" | "indigoLight" | "indigoSurface" | "pinkActive" | "pinkDim" | "pinkPrimary" | "pinkBright" | "pinkLight" | "pinkSurface" | "purpleActive" | "purpleDim" | "purplePrimary" | "purpleBright" | "purpleLight" | "purpleSurface" | "greyActive" | "greyDim" | "greyPrimary" | "greyBright" | "greyLight" | "greySurface" | "black" | "white" | "text" | "textPrimary" | "textSecondary" | "textAccent" | "textDisabled" | "backgroundPrimary" | "backgroundSecondary" | "border" | "blueGradient" | "greenGradient" | "redGradient" | "purpleGradient" | "greyGradient" | "inherit" | "initial" | "unset" | "transparent" | "currentColor" | "none" | 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 | 75 | 100 | 150 | 200 | 300 | 500 | 700 | 1000 | - | 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 |
