Lemonade Design System

Tooltips fornecem informações adicionais sobre foco ou hover. Geralmente contêm texto de ajuda que é contextual a algum elemento. Tooltips não recebem o foco de entrada.

Boas práticas

Devem conter apenas texto de leitura. O uso de elementos interativos como botões e links não é recomendado.
A posição deve ser flexível e mudar de acordo com a proximidade do componente com a borda da tela.

Exemplos

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