LabelTooltip

import { LabelTooltip } from '@tidbcloud/uikit/biz'

import { LabelTooltip } from '@tidbcloud/uikit/biz'
import { Group, Text } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <Group gap="xs">
      <Text>Field Label</Text>
      <LabelTooltip>This is helpful information about the field.</LabelTooltip>
    </Group>
  )
}

import { LabelTooltip } from '@tidbcloud/uikit/biz'
import { TextInput, Group } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <TextInput
      label={
        <Group gap={4}>
          Username
          <LabelTooltip>Your username must be unique and between 3-20 characters.</LabelTooltip>
        </Group>
      }
      placeholder="Enter username"
    />
  )
}

import { LabelTooltip } from '@tidbcloud/uikit/biz'
import { Stack, Text, Code } from '@tidbcloud/uikit'
 
function Demo() {
  return (
    <LabelTooltip>
      <Stack gap="xs">
        <Text size="sm">Supported formats:</Text>
        <Code>JSON, CSV, XML</Code>
      </Stack>
    </LabelTooltip>
  )
}

import { LabelTooltip } from '@tidbcloud/uikit/biz'
 
function Demo() {
  return (
    <LabelTooltip
      hoverCardProps={{
        position: 'right',
        width: 300,
        openDelay: 200
      }}
    >
      Detailed explanation that may need more space.
    </LabelTooltip>
  )
}