Calcite React

Edit page

Tooltip allows users to add an element at a target position when the user hovers over an element. We extend the react-popper library, view the documentation for a more complete list of available props.

Import Syntax

xxxxxxxxxx
 
import Tooltip from 'calcite-react/Tooltip'

Basic Usage

Hover Me

 
<Tooltip title="Basic Tooltip">
  <CalciteA>Hover Me</CalciteA>
</Tooltip>

placement="right"

placement="top"

placement="left"

placement="bottom"

Placement Left With No Room

placement="left"

Long Tooltip

 
<div>
  <GuideExample label='placement="right"'>
    <Tooltip title="Basic Tooltip" placement="right">
      <CalciteA>Placement Right</CalciteA>
    </Tooltip>
  </GuideExample>
  <GuideExample label='placement="top"'>
    <Tooltip title="Basic Tooltip" placement="top">
      <CalciteA>Placement Top</CalciteA>
    </Tooltip>
  </GuideExample>
  <GuideExample label='placement="left"' style={{ textAlign: 'center' }}>
    <Tooltip title="Basic Tooltip" placement="left">
      <CalciteA>Placement Left</CalciteA>
    </Tooltip>
  </GuideExample>
  <GuideExample label='placement="bottom"'>
    <Tooltip title="Basic Tooltip" placement="bottom">
      <CalciteA>Placement Bottom</CalciteA>
    </Tooltip>
  </GuideExample>
  <GuideExample label='placement="left"'>
    <Tooltip title="Basic Tooltip" placement="left">
      <CalciteA>Placement Left With No Room</CalciteA>
    </Tooltip>
  </GuideExample>
  <GuideExample>
    <Tooltip
      positionFixed
      placement="right"
      title="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
    >
      <CalciteA>Long Tooltip</CalciteA>
    </Tooltip>
  </GuideExample>
</div>

Hover Me

 
<Tooltip title={<Label>I'm a label!</Label>}>
  <CalciteA>Hover Me</CalciteA>
</Tooltip>

Hover Me

 
<Tooltip title="It took me a while to show up..." enterDelay={1000}>
  <CalciteA>Hover Me</CalciteA>
</Tooltip>

Don't Hover Me

I'm always open because I have the 'open' prop

 
<Tooltip
  open
  title="I'm always open because I have the 'open' prop"
  placement="right"
>
  <CalciteA>Don't Hover Me</CalciteA>
</Tooltip>

Label With Tooltip

Bridge Club, 1954 — Florida, January 1954

Card with Image

Cards can have full-bleed images with optional captions.

 
<div>
  <GuideExample>
    <Tooltip title="This Button Has a Tooltip!">
      <Button>Button With Tooltip</Button>
    </Tooltip>
  </GuideExample>
  <GuideExample>
    <Tooltip title="This Label Has a Tooltip!">
      <Label>Label With Tooltip</Label>
    </Tooltip>
  </GuideExample>
  <GuideExample>
    <Tooltip title="This Card Has a Tooltip!">
      <Card style={{ maxWidth: '320px' }}>
        <CardImage
          src={cardImage}
          caption="Florida, January 1954"
          alt="Bridge Club, 1954"
        />
        <CardContent>
          <CardTitle>Card with Image</CardTitle>
          <p>Cards can have full-bleed images with optional captions.</p>
          <Button>View Examples</Button>
        </CardContent>
      </Card>
    </Tooltip>
  </GuideExample>
</div>

Props

Property	Type	Required	Default	Description
title	Node	false	[Empty String]	Nodes to be used as Tooltip content.
placement	Enum	false	undefined	Placement of the popover in relation to the target. The Tooltip will override the placement if there is no room. If this property is not set, the Tooltip will position itself wherever there is room.
transitionDuration	Number	false	200	Duration of animation in milliseconds.
enterDelay	Number	false	undefined	Delay (in milliseconds) before the Tooltip will show. Prop overrides the value specified in the theme (0ms).
children	Node	false	-	Nodes to be used as the target of the Tooltip.
open	Bool	false	-	Boolean to programatically control the visibility of the Tooltip
positionFixed	Bool	false	-	Uses `position: fixed` on the Tooltip, allowing it to show up outside of containers that have `overflow: hidden`.
style	Object	false	-	Apply styles to the Tooltip element.
arrowStyle	Object	false	-	Apply styles to the Tooltip arrow element.
targetWrapperStyle	Object	false	-	Apply styles to the Tooltip target wrapper element.
popperModifiers	Object	false	-	Modifiers to be passed to the Popper element

Calcite React

Tooltip

Import Syntax

Basic Usage

Tooltip Placement

Component in Tooltip

Delayed Tooltip

Programatically Open Tooltip

Tooltip on Other Components

Card with Image

Props