工具提示

import { type ComponentProps } from 'solid-js';
import { Space, Tooltip } from '@fibrous/semi-ui-solid';

const style = { border: '2px solid var(--semi-color-border)', 'padding-left': '4px', 'padding-right': '4px', 'border-radius': '4px' };

// A component only works as a trigger when the props from getTriggerProps (including ref) reach its DOM node
function Child(props: ComponentProps<'span'>) {
    return (
        <span {...props} style={style}>
            Functional Component
        </span>
    );
}

export default function TooltipDemo() {
    return (
        <Space>
            <Tooltip content="semi design">{(trigger) => <Child {...trigger()} />}</Tooltip>
            <Tooltip content="semi design">
                <span style={style}>DOM</span>
            </Tooltip>
            <Tooltip content="semi design">Text</Tooltip>
        </Space>
    );
}

import { For } from 'solid-js';
import { Tag, Tooltip, type TooltipPosition } from '@fibrous/semi-ui-solid';

type Item = [TooltipPosition, string];

const tops: Item[] = [
    ['topLeft', 'TL'],
    ['top', 'Top'],
    ['topRight', 'TR'],
];
const lefts: Item[] = [
    ['leftTop', 'LT'],
    ['left', 'Left'],
    ['leftBottom', 'LB'],
];
const rights: Item[] = [
    ['rightTop', 'RT'],
    ['right', 'Right'],
    ['rightBottom', 'RB'],
];
const bottoms: Item[] = [
    ['bottomLeft', 'BL'],
    ['bottom', 'Bottom'],
    ['bottomRight', 'BR'],
];

function Tips(props: { items: Item[]; width?: string }) {
    return (
        <For each={props.items}>
            {([position, label]) => (
                <Tooltip
                    content={
                        <article>
                            <p>hi bytedance</p>
                            <p>hi bytedance</p>
                        </article>
                    }
                    arrowPointAtCenter={false}
                    position={position}
                >
                    {(trigger) => (
                        <Tag style={{ margin: '8px', padding: '20px', width: props.width }} {...trigger()}>
                            {label}
                        </Tag>
                    )}
                </Tooltip>
            )}
        </For>
    );
}

export default function TooltipDemo() {
    return (
        <div>
            <div style={{ 'margin-left': '80px', 'white-space': 'nowrap' }}>
                <Tips items={tops} />
            </div>
            <div style={{ width: '80px', float: 'left' }}>
                <Tips items={lefts} width="60px" />
            </div>
            <div style={{ width: '40px', 'margin-left': '300px' }}>
                <Tips items={rights} width="60px" />
            </div>
            <div style={{ 'margin-left': '80px', clear: 'both', 'white-space': 'nowrap' }}>
                <Tips items={bottoms} width="60px" />
            </div>
        </div>
    );
}

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

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

            <div style={{ 'margin-top': '20px' }}>
                <Tooltip content="semi design tooltip" arrowPointAtCenter={false} position="topLeft">
                    {(trigger) => (
                        <Button type="secondary" style={{ 'margin-right': '8px', width: '120px' }} {...trigger()}>
                            边缘对齐
                        </Button>
                    )}
                </Tooltip>
            </div>
        </>
    );
}

import { createSignal } from 'solid-js';
import { Button, Input, Radio, RadioGroup, Tooltip } from '@fibrous/semi-ui-solid';

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

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

import { createSignal } from 'solid-js';
import { Button, Space, Switch, Tooltip, Typography } from '@fibrous/semi-ui-solid';

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

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

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

export default function TooltipDemo() {
    return (
        <div>
            <Tooltip style={{ 'max-width': '320px' }} class="another-classname" content="hi semi semi semi semi semi semi semi">
                {(trigger) => (
                    <Tag style={{ 'margin-right': '8px' }} {...trigger()}>
                        Custom Style And ClassName
                    </Tag>
                )}
            </Tooltip>
        </div>
    );
}

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

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

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

const { Paragraph, Title, Text } = Typography;

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