You can define the tooltip placement sending the prop placement
with one of the available options: top | right | bottom | left
.
If you don't specify a desired placement
, the component will automatically choose the one that fits better.
If the desired placement
doesn't fit on screen, the component will automatically switch to the one that fits better.
import React from 'react' import { Tooltip, Flex, FlexItem } from 'playbook-ui' const TooltipDefaultReact = (props) => { return ( <Flex flexDirection='row' gap='md' wrap > <FlexItem> <Tooltip placement='top' text="Whoa. I'm a Tooltip" zIndex={10} > {'Hover here (Top)'} </Tooltip> </FlexItem> <FlexItem> <Tooltip placement='bottom' text="Whoa. I'm a Tooltip" zIndex={10} > {'Hover here (Bottom)'} </Tooltip> </FlexItem> <FlexItem> <Tooltip placement='right' text="Whoa. I'm a Tooltip" zIndex={10} > {'Hover here (Right)'} </Tooltip> </FlexItem> <FlexItem> <Tooltip placement='left' text="Whoa. I'm a Tooltip" zIndex={10} > {'Hover here (Left)'} </Tooltip> </FlexItem> </Flex> ) } export default TooltipDefaultReact
Set the prop interaction
as true
for cases that require users to copy the content inside the tooltip.
import React from 'react' import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui' const TooltipInteraction = (props) => { return ( <Flex flexDirection='row' gap='md' wrap > <FlexItem> <Tooltip interaction placement='top' text="You can copy me" zIndex={10} > <Button text="With Interaction"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip placement='top' text="I'm just a regular tooltip" zIndex={10} > <Button text="No Interaction"/> </Tooltip> </FlexItem> </Flex> ) } export default TooltipInteraction
You should set margin
in the tooltip
component itself. If you add this prop to the child, it will cause the tooltip to be pulled away from the trigger.
It is not recommended to set padding
in the tooltip
nor its child, doing so will cause it to be pulled away from its trigger element.
import React from 'react' import { Tooltip, Flex, CircleIconButton } from 'playbook-ui' const TooltipMargin = (props) => { return ( <Flex flexDirection='row' wrap > <Tooltip margin='md' placement='top' text='Send Email' zIndex={10} > <CircleIconButton icon='paper-plane' /> </Tooltip> <Tooltip margin='md' placement='top' text='Send Email' zIndex={10} > <CircleIconButton icon='paper-plane' /> </Tooltip> </Flex> ) } export default TooltipMargin
You can customize the height
and width
of the tooltip's popover.
When using maxHeight
, be sure to set a width
as well. The text needs to truncate within the width
prop.
import React from 'react' import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui'; const TooltipSizing = (props) => { return ( <Flex flexDirection='row' gap='md' wrap > <FlexItem> <Tooltip height='150px' placement='top' text="I'm 150px high and 100px wide!" width='100px' > <Button text="Height and Width"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip maxHeight='100px' placement='top' text="I have a maxHeight of 100px! Lorem ipsum dolor sit amet consectetur adipisicing elit." width='250px' > <Button text="maxHeight"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip maxWidth='150px' placement='top' text="I have a maxWidth of 150px! Lorem ipsum dolor sit amet consectetur adipisicing elit." > <Button text="maxWidth"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip minWidth='300px' placement='top' text="I have a minWidth of 300px!" > <Button text="minWidth"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip maxWidth='150px' minHeight='300px' placement='top' text="I have a minHeight of 300px!" > <Button text="minHeight"/> </Tooltip> </FlexItem> </Flex> ) } export default TooltipSizing
Set the prop icon
with the desired icon to display inside the tooltip.
import React from 'react' import { Button, Tooltip, Flex } from 'playbook-ui' const TooltipIcon = (props) => { return ( <Flex flexDirection='row' gap='md' wrap > <Tooltip icon='paper-plane' placement='top' text='Send Email' zIndex={10} > <Button text='Tooltip With Icon' /> </Tooltip> <Tooltip icon='paper-plane' placement='bottom' text='Send Email' zIndex={10} > <Button text='Tooltip With Icon' /> </Tooltip> <Tooltip icon='paper-plane' placement='right' text='Send Email' zIndex={10} > <Button text='Tooltip With Icon' /> </Tooltip> <Tooltip icon='paper-plane' placement='left' text='Send Email' zIndex={10} > <Button text='Tooltip With Icon' /> </Tooltip> </Flex> ) } export default TooltipIcon
Waits for the specified time when the event listener runs before triggering the tooltip.
The delay
accepts number
in ms
or an object
with open
and close
properties.
The default
is 0
.
import React from 'react' import { Button, Tooltip, Flex, FlexItem } from 'playbook-ui' const TooltipDelay = (props) => { return ( <Flex flexDirection='row' gap='md' wrap > <FlexItem> <Tooltip delay={1000} placement='top' text="1s open/close delay" zIndex={10} > <Button text="1s delay"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip delay={{ open: 1000 }} placement='top' text="1s open delay" zIndex={10} > <Button text="Open only"/> </Tooltip> </FlexItem> <FlexItem> <Tooltip delay={{ close: 1000 }} placement='top' text="1s close delay" zIndex={10} > <Button text="Close only"/> </Tooltip> </FlexItem> </Flex> ) } export default TooltipDelay
You can build your own logic to control whether to show the tooltip using the showTooltip
prop. Its default value is true
.
Click on the Toggle state
button to change the state of the component and hover over the 'hover me' text to see it in action.
import React, { useState } from 'react' import { Button, Body, Tooltip, Flex, FlexItem } from 'playbook-ui' const TooltipShowTooltipReact = (props) => { const [showTooltip, setShowTooltip] = useState(true); return ( <Flex flexDirection='column' gap='md' wrap > <FlexItem> <Button onClick={()=> setShowTooltip(!showTooltip)} text="Toggle state" /> </FlexItem> <FlexItem> <Body > <p> {'Tooltip is: '} <code>{showTooltip ? "enabled" : "disabled"}</code> </p> </Body> </FlexItem> <FlexItem> <Tooltip placement='right' showTooltip={showTooltip} text='Tooltip is enabled' zIndex={10} > {'Hover me.'} </Tooltip> </FlexItem> </Flex> ) } export default TooltipShowTooltipReact