工具提示

基础使用

<CTooltip content="你好，世界">
  <CButton label="Hover Me" />
</CTooltip>

不同位置

function Demo() {
  const positions = [
    'top-left',
    'top',
    'top-right',
    'right-top',
    'right',
    'right-bottom',
    'bottom-left',
    'bottom',
    'bottom-right',
    'left-top',
    'left',
    'left-bottom',
  ]
  return (
    <div
      style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: '24px',
      }}
    >
      {positions.map(p => (
        <CTooltip
          key={p}
          position={p}
          content={`来自于位置：${p}的tooltip信息`}
        >
          <div
            style={{ color: '#fff', backgroundColor: 'var(--casual-primary)', lineHeight: '3em', textAlign: 'center' }}
          >
            {p}
          </div>
        </CTooltip>
      ))}
    </div>
  )
}

触发方式

function Demo() {
  const [show, setShow] = useState(false)

  return (
    <div className="c-row c-gutter-x-md">
      <div>
        <CTooltip content="你好，世界">
          <CButton
            outlined
            rounded
            label="悬浮（默认）"
          />
        </CTooltip>
      </div>
      <div>
        <CTooltip
          trigger="click"
          content="你好，世界"
        >
          <CButton
            rounded
            label="点击"
          />
        </CTooltip>
      </div>
      <div>
        <CButton
          label="手动"
          onClick={() => setShow(!show)}
        />
        <CTooltip
          trigger="manual"
          content="你好，世界"
          show={show}
          toggleShow={setShow}
        >
          点击左侧按钮手动触发
        </CTooltip>
      </div>
    </div>
  )
}

自定义内容

<CTooltip
  content={
    <div>
      哇哦，支持自定义内容
      <CButton
        label="我是自定义按钮"
        outlined
        round
      />
    </div>
  }
  trigger="click"
>
  <CButton label="点我" />
</CTooltip>

Props

名称 (*代表必须)	描述	类型	默认值

No Data

基础使用​

不同位置​

触发方式​

自定义内容​

Props​

基础使用

不同位置

触发方式

自定义内容

Props