Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

CSS utilities
CSS variables

Tooltip

Usage Guidelines

Hover me.

Usage

import { Tooltip } from '@loomhq/lens'
<Tooltip content="Hi there!" placement='topCenter'>
  Hover me
</Tooltip>

Placement

topLeft

topCenter

topRight

bottomLeft

bottomCenter

bottomRight

leftTop

leftCenter

leftBottom

rightTop

rightCenter

rightBottom

<div style={{
  "display": "grid",
  "gridTemplateColumns": "1fr 1fr 1fr",
  "textAlign": "center",
  "gridGap": "1rem"
}}>
  <Tooltip content="I'm here" placement='topLeft'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">topLeft</Container>
  </Tooltip>
  <Tooltip content="I'm here">
    <Container backgroundColor='overlay' borderSide='all' padding="medium">topCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='topRight'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">topRight</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='bottomLeft'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">bottomLeft</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='bottomCenter'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">bottomCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='bottomRight'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">bottomRight</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='leftTop'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">leftTop</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='leftCenter'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">leftCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='leftBottom'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">leftBottom</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='rightTop'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">rightTop</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='rightCenter'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">rightCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='rightBottom'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">rightBottom</Container>
  </Tooltip>
</div>

<div style={{
  "display": "grid",
  "gridTemplateColumns": "1fr 1fr 1fr",
  "textAlign": "center",
  "gridGap": "1rem"
}}>
  <Tooltip content="I'm here" placement='topLeft'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">topLeft</Container>
  </Tooltip>
  <Tooltip content="I'm here">
    <Container backgroundColor='overlay' borderSide='all' padding="medium">topCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='topRight'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">topRight</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='bottomLeft'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">bottomLeft</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='bottomCenter'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">bottomCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='bottomRight'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">bottomRight</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='leftTop'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">leftTop</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='leftCenter'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">leftCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='leftBottom'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">leftBottom</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='rightTop'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">rightTop</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='rightCenter'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">rightCenter</Container>
  </Tooltip>
  <Tooltip content="I'm here" placement='rightBottom'>
    <Container backgroundColor='overlay' borderSide='all' padding="medium">rightBottom</Container>
  </Tooltip>
</div>

Max width

trigger

<Tooltip maxWidth={40} content={demoText.medium}>
  <div>trigger</div>
</Tooltip>

<Tooltip maxWidth={40} content={demoText.medium}>
  <div>trigger</div>
</Tooltip>

Trigger offset

Offset from trigger 4px

Offset from trigger 32px

<Distribute gap="large">
  <Tooltip content='4px' triggerOffset={4}>
    <div>Offset from trigger 4px</div>
  </Tooltip>
  <Tooltip content='32px' triggerOffset={32}>
    <div>Offset from trigger 32px</div>
  </Tooltip>
</Distribute>

<Distribute gap="large">
  <Tooltip content='4px' triggerOffset={4}>
    <div>Offset from trigger 4px</div>
  </Tooltip>
  <Tooltip content='32px' triggerOffset={32}>
    <div>Offset from trigger 32px</div>
  </Tooltip>
</Distribute>

Keep open

When keepOpen is true the Tooltip will stay open when it's hovered.

Keep my tooltip open

<Tooltip keepOpen content='Hover me and I will stay open'>
  <div>Keep my tooltip open</div>
</Tooltip>

<Tooltip keepOpen content='Hover me and I will stay open'>
  <div>Keep my tooltip open</div>
</Tooltip>

Inline and block

Wrap children with display: inline-block

Wrap children with display: block


<>
  <Tooltip isInline content='Content'>
    <Container borderSide="all" borderColor="red">Wrap children with display: inline-block</Container>
  </Tooltip>
  <Tooltip isInline={false} content='Content'>
    <Container borderSide="all" borderColor="red">Wrap children with display: block</Container>
  </Tooltip>
</>


<>
  <Tooltip isInline content='Content'>
    <Container borderSide="all" borderColor="red">Wrap children with display: inline-block</Container>
  </Tooltip>
  <Tooltip isInline={false} content='Content'>
    <Container borderSide="all" borderColor="red">Wrap children with display: block</Container>
  </Tooltip>
</>

Tooltip uses TooltipBox internally, use it to build a tooltip with custom behavior.

TooltipBox content

<TooltipBox maxWidth={30}>
  TooltipBox content
</TooltipBox>

<TooltipBox maxWidth={30}>
  TooltipBox content
</TooltipBox>

Examples

<>
  <Tooltip content='Delete'>
    <IconButton icon={<SvgTrash />} />
  </Tooltip>
  <Tooltip content='Add'>
    <IconButton icon={<SvgAdd />} />
  </Tooltip>
  <Tooltip content='Close'>
    <IconButton icon={<SvgClose />} />
  </Tooltip>
</>

<>
  <Tooltip content='Delete'>
    <IconButton icon={<SvgTrash />} />
  </Tooltip>
  <Tooltip content='Add'>
    <IconButton icon={<SvgAdd />} />
  </Tooltip>
  <Tooltip content='Close'>
    <IconButton icon={<SvgClose />} />
  </Tooltip>
</>

Props

prop

type

default

required

placement

oneOf: "topLeft", "topCenter", "topRight", "bottomLeft", "bottomCenter", "bottomRight", "leftTop", "leftCenter", "leftBottom", "rightTop", "rightCenter", "rightBottom"

'topCenter'

triggerOffset

number

maxWidth

oneOfType

number

string

array

isInline

bool

true

content

node

keepOpen

bool

prop

type

default

required

children

node

maxWidth

oneOfType

number

string

array

onMouseEnter

func

onMouseLeave

func

layerProps

object

Guides

Styles

Components

Layout

Icons

Illustrations

Patterns

Utilities

Tooltip

Usage

Placement

Max width

Trigger offset

Keep open

Inline and block

TooltipBox

Examples

IconButton with Tooltip

Props

Tooltip

TooltipBox