Skip to content
Lemonade

Tooltip

Tooltips provide additional information upon hover or focus. They often contain helper text that is contextual to an element. Tooltips do not receive input focus.

Best practices

  • They should contain read-only text. The use of interactive elements, such as Buttons or Links is discouraged.
  • The position must be flexible and change depending on how close the element is to the edge of the screen.

Examples

import { Button, HFlow, Icon, Tooltip } from '@lemonade/ui'
import React from 'react'

function TooltipDefault() {
  return (
    <HFlow hSpacing={0.5} alignItems='center'>
      <Tooltip text='Delete' placement='bottom-start'>
        <Button skin='ghost' size='small'>
          <Icon icon='trashOutline' />
        </Button>
      </Tooltip>
      <Tooltip text='This file cannot be deleted'>
        <Button skin='ghost' size='small' disabled>
          <Icon icon='trashOutline' />
        </Button>
      </Tooltip>
    </HFlow>
  )
}

export default TooltipDefault