---
name: Tooltip
route: /components/common/controls/tooltip
menu: Controls
edit: false
---

import { Playground, Props } from 'docz'
import Tooltip from './tooltip'

export const playgroundStyle = {
    paddingTop: '1em',
    justifyContent: 'center',
    display: 'flex'
}

export const inversePlaygroundStyle = {
    backgroundColor: "#333",
    margin: '-2em',
    padding: '3em 2em 2em',
    justifyContent: 'center',
    display: 'flex'
}

# Tooltip
**SUBCATEGORY:** Controls

<hr />

## Tooltip
### Description
For displaying additional contextual information: composed of a tooltip label and tooltip balloon.
Position the tooltip balloon below the label by default, adjust where constrained by layout.

**North**
<Playground style={playgroundStyle}>
    <Tooltip labelText='Tooltip label' balloonText='Tooltip balloon' />
</Playground>

**South**
<Playground style={playgroundStyle}>
    <Tooltip labelText='Tooltip label' balloonText='Tooltip balloon' direction='south' />
</Playground>

**East**
<Playground style={playgroundStyle}>
    <Tooltip direction='left' labelText='Tooltip label' balloonText='Tooltip balloon' direction='east' />
</Playground>

**West**
<Playground style={playgroundStyle}>
    <Tooltip labelText='Tooltip label' balloonText='Tooltip balloon' direction='west' />
</Playground>


<hr />

## Tooltip (inverse)
### Description
For displaying additional contextual information: composed of a tooltip label and tooltip balloon.
Position the tooltip balloon below the label by default, adjust where constrained by layout.

**North**
<Playground style={inversePlaygroundStyle}>
    <Tooltip inverse labelText='Tooltip label' balloonText='Tooltip balloon' />
</Playground>

**South**
<Playground style={inversePlaygroundStyle}>
    <Tooltip inverse labelText='Tooltip label' balloonText='Tooltip balloon' direction='south' />
</Playground>

**East**
<Playground style={inversePlaygroundStyle}>
    <Tooltip direction='left' inverse labelText='Tooltip label' balloonText='Tooltip balloon' direction='east' />
</Playground>

**West**
<Playground style={inversePlaygroundStyle}>
    <Tooltip inverse labelText='Tooltip label' balloonText='Tooltip balloon' direction='west' />
</Playground>


<hr />

## Properties
<Props of={Tooltip} />