Tooltip

Summary

Default

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

Code Copied

Content Interaction

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

Code Copied

Margin

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

Code Copied

Tooltip Sizing

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

Code Copied

Tooltip with Icon

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

Code Copied

Delay

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

Code Copied

Show Tooltip

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

Code Copied

Click to Open

Set the prop useClickToOpen so that the tooltip will only appear when an item is clicked rather than hovered over.

import React from 'react'

import { Button, Tooltip, Flex } from 'playbook-ui'

const TooltipClickOpen = (props) => {
  return (
    <Flex flexDirection='row'
        gap='md'
        wrap
    >
      <Tooltip
          placement='top'
          text='Tooltip Opened'
          useClickToOpen
          zIndex={10}
      >
        <Button text='Click to Open' />
      </Tooltip>
    </Flex>
  )
}

export default TooltipClickOpen

Code Copied

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Github

Connect Chat