工具提示

import React from 'react';
import { Tooltip, Space } from '@fibrous/semi-ui-react';

const style = { border: '2px solid var(--semi-color-border)', paddingLeft: 4, paddingRight: 4, borderRadius: 4 };

// Pass props to the underlying DOM and bind the ref (a plain prop in React 19)
function FCChildren({ ref, ...props }: React.ComponentProps<'span'>) {
    return (
        <span {...props} ref={ref} style={style}>
            Functional Component
        </span>
    );
}

// React 19 cannot reach a class component's DOM node, so wrap it in a real DOM node
class MyComponent extends React.Component {
    render() {
        return (
            <span {...this.props} style={style}>
                ClassComponent
            </span>
        );
    }
}

export default function TooltipDemo() {
    return (
        <Space>
            <Tooltip content="semi design">
                <FCChildren />
            </Tooltip>
            <Tooltip content="semi design">
                <span>
                    <MyComponent />
                </span>
            </Tooltip>
            <Tooltip content="semi design">
                <span style={style}>DOM</span>
            </Tooltip>
        </Space>
    );
}

import { Tooltip, Tag, type TooltipPosition as Position } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    const tops: [Position, string][] = [
        ['topLeft', 'TL'],
        ['top', 'Top'],
        ['topRight', 'TR'],
    ];
    const lefts: [Position, string][] = [
        ['leftTop', 'LT'],
        ['left', 'Left'],
        ['leftBottom', 'LB'],
    ];
    const rights: [Position, string][] = [
        ['rightTop', 'RT'],
        ['right', 'Right'],
        ['rightBottom', 'RB'],
    ];
    const bottoms: [Position, string][] = [
        ['bottomLeft', 'BL'],
        ['bottom', 'Bottom'],
        ['bottomRight', 'BR'],
    ];

    return (
        <div>
            <div style={{ marginLeft: 80, whiteSpace: 'nowrap' }}>
                {tops.map(([position, label], index) => (
                    <Tooltip
                        content={
                            <article>
                                <p>hi bytedance</p>
                                <p>hi bytedance</p>
                            </article>
                        }
                        arrowPointAtCenter={false}
                        position={position}
                        key={index}
                    >
                        <Tag style={{ margin: 8, padding: 20 }}>{label}</Tag>
                    </Tooltip>
                ))}
            </div>
            <div style={{ width: 80, float: 'left' }}>
                {lefts.map(([position, label], index) => (
                    <Tooltip
                        content={
                            <article>
                                <p>hi bytedance</p>
                                <p>hi bytedance</p>
                            </article>
                        }
                        arrowPointAtCenter={false}
                        position={position}
                        key={index}
                    >
                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{label}</Tag>
                    </Tooltip>
                ))}
            </div>
            <div style={{ width: 40, marginLeft: 300 }}>
                {rights.map(([position, label], index) => (
                    <Tooltip
                        content={
                            <article>
                                <p>hi bytedance</p>
                                <p>hi bytedance</p>
                            </article>
                        }
                        arrowPointAtCenter={false}
                        position={position}
                        key={index}
                    >
                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{label}</Tag>
                    </Tooltip>
                ))}
            </div>
            <div style={{ marginLeft: 80, clear: 'both', whiteSpace: 'nowrap' }}>
                {bottoms.map(([position, label], index) => (
                    <Tooltip
                        content={
                            <article>
                                <p>hi bytedance</p>
                                <p>hi bytedance</p>
                            </article>
                        }
                        arrowPointAtCenter={false}
                        position={position}
                        key={index}
                    >
                        <Tag style={{ margin: 8, padding: 20, width: 60 }}>{label}</Tag>
                    </Tooltip>
                ))}
            </div>
        </div>
    );
}

import { Tooltip, Button } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    return (
        <>
            <div>
                <Tooltip position="topLeft" content="semi design tooltip">
                    <Button type="secondary" style={{ marginRight: 8 }}>
                        指向元素中心
                    </Button>
                </Tooltip>
            </div>

            <div style={{ marginTop: 20 }}>
                <Tooltip content="semi design tooltip" arrowPointAtCenter={false} position="topLeft">
                    <Button type="secondary" style={{ marginRight: 8, width: 120 }}>
                        边缘对齐
                    </Button>
                </Tooltip>
            </div>
        </>
    );
}

import { useState } from 'react';
import { Tooltip, Button, Input, RadioGroup, Radio } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    const [visible, setVisible] = useState(false);

    return (
        <div>
            <Tooltip content="hi bytedance">
                <Button theme="solid" type="tertiary" style={{ marginBottom: 20 }}>
                    悬停显示
                </Button>
            </Tooltip>
            <br />
            <Tooltip content="hi bytedance" trigger="click">
                <Button style={{ marginBottom: 20 }}>点击显示</Button>
            </Tooltip>
            <br />
            <Tooltip content="hi bytedance" trigger="focus">
                <Input aria-label="聚焦显示" style={{ width: 100, marginBottom: 20 }} placeholder="聚焦显示" />
            </Tooltip>
            <br />
            <Tooltip content="hi bytedance" trigger="contextMenu">
                <Button theme="solid" type="secondary" style={{ marginBottom: 20 }}>
                    右键点击展示
                </Button>
            </Tooltip>
            <br />
            <Tooltip content="hi bytedance" trigger="custom" visible={visible}>
                <span style={{ display: 'inline-block' }}>
                    <RadioGroup type="button" onChange={(e) => setVisible(e.target.value)} value={visible}>
                        <Radio value>受控显示</Radio>
                        <Radio value={false}>受控隐藏</Radio>
                    </RadioGroup>
                </span>
            </Tooltip>
        </div>
    );
}

import { useMemo, useState } from 'react';
import { Tooltip, Button, Switch, Space, Typography } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    const [enabled, setEnabled] = useState(true);
    const content = useMemo(() => `condition is ${enabled ? 'true' : 'false'}`, [enabled]);

    return (
        <Space align="center">
            <Typography.Text id="tooltip-condition-label">condition</Typography.Text>
            <Switch aria-labelledby="tooltip-condition-label" checked={enabled} onChange={(v) => setEnabled(v)} />
            <Tooltip content={content} trigger="hover" condition={enabled}>
                <Button>Hover me</Button>
            </Tooltip>
            <Tooltip content={content} trigger="click" condition={enabled}>
                <Button>Click me</Button>
            </Tooltip>
        </Space>
    );
}

import { Tooltip, Tag } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    return (
        <div>
            <Tooltip
                style={{
                    maxWidth: 320,
                }}
                className="another-classname"
                content="hi semi semi semi semi semi semi semi"
            >
                <Tag style={{ marginRight: '8px' }}>Custom Style And ClassName</Tag>
            </Tooltip>
        </div>
    );
}

import { Tooltip, Popconfirm, Button } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    return (
        <Popconfirm content="是否确认删除" title="确认" style={{ width: 320 }}>
            <span style={{ display: 'inline-block' }}>
                <Tooltip content="删除评价">
                    <Button type="danger">删除</Button>
                </Tooltip>
            </span>
        </Popconfirm>
    );
}

import { Typography } from '@fibrous/semi-ui-react';

export default function TooltipDemo() {
    const { Paragraph, Title, Text } = Typography;

    return (
        <div>
            <Title heading={5} ellipsis={{ showTooltip: true }} style={{ width: 250 }}>
                是一个很长很长很长很长5号标题
            </Title>
            <br />
            <Text link ellipsis={{ showTooltip: true, pos: 'middle' }} style={{ width: 150 }}>
                是一个很长很长很长很长的链接
            </Text>
            <br />
            <br />
            <Paragraph ellipsis={{ rows: 3, showTooltip: { type: 'popover', opts: { style: { width: 300 } } } }} style={{ width: 300 }}>
                多行截断，展示 Popover：Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。
            </Paragraph>
        </div>
    );
}