Display a small information icon which can be toggled by clicking on it.
import { InfoPopover } from '@folio/stripes/components';
<InfoPopover
allowAnchorClick
content="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
buttonLabel="Read more"
buttonHref="https://wiki.folio.org/"
buttonTarget="_blank"
/>
Name | Type | Description | default |
---|---|---|---|
allowAnchorClick | boolean | Whether to allow the link button to be clicked | false |
content | node | The content of the information popover | |
buttonLabel | node | The label of the button inside the information popover | "Read more" |
buttonHref | string | The destination for the button inside the information popover | |
buttonTarget | string | The target for the button | _blank |
contentClass | string | className for content inside popover |
|
iconSize | string | The size of the icon (small or medium ) |
small |
hideOnButtonClick | boolean | Whether to hide popover on anchor button click | false |
renderTrigger | func | Render a custom trigger button. The function will receive an object that contains the the open -state, a ref that needs to be passed onto trigger button and a toggle -function for toggling the <InfoPopover> . The render function should return a button. |
|
buttonProps | object | Pass additional props to the trigger <IconButton> |
{} |
popperProps | object | Pass additional props to the underlying <Popper> |
{} |
The remaining props passed to <InfoPopover>
will be passed down to the internal <Popover>
.