工具提示

<script lang="ts">
    import { Space, Tag, Tooltip } from '@fibrae/semi-ui-svelte';

    const style = 'border: 2px solid var(--semi-color-border); padding-left: 4px; padding-right: 4px; border-radius: 4px';
</script>

<Space>
    <Tooltip>
        <Tag {style}>Component</Tag>
        {#snippet content()}semi design{/snippet}
    </Tooltip>
    <Tooltip>
        Text
        {#snippet content()}semi design{/snippet}
    </Tooltip>
    <Tooltip>
        {#snippet child({ props })}
            <span {...props} {style}>DOM</span>
        {/snippet}
        {#snippet content()}semi design{/snippet}
    </Tooltip>
</Space>

<script lang="ts">
    import { Tag, Tooltip, type Position } from '@fibrae/semi-ui-svelte';

    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'],
    ];
</script>

{#snippet bubble()}
    <article>
        <p>hi bytedance</p>
        <p>hi bytedance</p>
    </article>
{/snippet}

<div>
    <div style="margin-left: 80px; white-space: nowrap">
        {#each tops as [position, label] (position)}
            <Tooltip arrowPointAtCenter={false} content={bubble} {position}>
                <Tag style="margin: 8px; padding: 20px">{label}</Tag>
            </Tooltip>
        {/each}
    </div>
    <div style="width: 80px; float: left">
        {#each lefts as [position, label] (position)}
            <Tooltip arrowPointAtCenter={false} content={bubble} {position}>
                <Tag style="margin: 8px; padding: 20px; width: 60px">{label}</Tag>
            </Tooltip>
        {/each}
    </div>
    <div style="width: 40px; margin-left: 300px">
        {#each rights as [position, label] (position)}
            <Tooltip arrowPointAtCenter={false} content={bubble} {position}>
                <Tag style="margin: 8px; padding: 20px; width: 60px">{label}</Tag>
            </Tooltip>
        {/each}
    </div>
    <div style="margin-left: 80px; clear: both; white-space: nowrap">
        {#each bottoms as [position, label] (position)}
            <Tooltip arrowPointAtCenter={false} content={bubble} {position}>
                <Tag style="margin: 8px; padding: 20px; width: 60px">{label}</Tag>
            </Tooltip>
        {/each}
    </div>
</div>

<script lang="ts">
    import { Button, Tooltip } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Tooltip position="topLeft">
        {#snippet child({ props })}
            <Button {...props} style="margin-right: 8px" type="secondary">指向元素中心</Button>
        {/snippet}
        {#snippet content()}semi design tooltip{/snippet}
    </Tooltip>
</div>

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

<script lang="ts">
    import { Button, Input, Radio, RadioGroup, Tooltip, type RadioValue } from '@fibrae/semi-ui-svelte';

    let visible = $state<RadioValue | undefined>(0);
</script>

{#snippet text()}hi bytedance{/snippet}

<div>
    <Tooltip content={text}>
        {#snippet child({ props })}
            <Button {...props} style="margin-bottom: 20px" theme="solid" type="tertiary">悬停显示</Button>
        {/snippet}
    </Tooltip>
    <br />
    <Tooltip content={text} trigger="click">
        {#snippet child({ props })}
            <Button {...props} style="margin-bottom: 20px">点击显示</Button>
        {/snippet}
    </Tooltip>
    <br />
    <Tooltip content={text} trigger="focus">
        {#snippet child({ props })}
            <Input {...props} aria-label="聚焦显示" placeholder="聚焦显示" style="width: 100px; margin-bottom: 20px" />
        {/snippet}
    </Tooltip>
    <br />
    <Tooltip content={text} trigger="contextMenu">
        {#snippet child({ props })}
            <Button {...props} style="margin-bottom: 20px" theme="solid" type="secondary">右键点击展示</Button>
        {/snippet}
    </Tooltip>
    <br />
    <Tooltip content={text} trigger="custom" visible={visible === 1}>
        {#snippet child({ props })}
            <span {...props} style="display: inline-block" tabindex="-1">
                <RadioGroup bind:value={visible} type="button">
                    <Radio value={1}>受控显示</Radio>
                    <Radio value={0}>受控隐藏</Radio>
                </RadioGroup>
            </span>
        {/snippet}
    </Tooltip>
</div>

<script lang="ts">
    import { Button, Space, Switch, Tooltip, TypographyText } from '@fibrae/semi-ui-svelte';

    let enabled = $state(true);
    const text = $derived(`condition is ${enabled ? 'true' : 'false'}`);
</script>

<Space align="center">
    <TypographyText id="tooltip-condition-label">condition</TypographyText>
    <Switch aria-labelledby="tooltip-condition-label" bind:checked={enabled} />
    <Tooltip condition={enabled} trigger="hover">
        {#snippet child({ props })}
            <Button {...props}>Hover me</Button>
        {/snippet}
        {#snippet content()}{text}{/snippet}
    </Tooltip>
    <Tooltip condition={enabled} trigger="click">
        {#snippet child({ props })}
            <Button {...props}>Click me</Button>
        {/snippet}
        {#snippet content()}{text}{/snippet}
    </Tooltip>
</Space>

<script lang="ts">
    import { Tag, Tooltip } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Tooltip class="another-classname" style="max-width: 320px">
        <Tag style="margin-right: 8px">Custom Style And ClassName</Tag>
        {#snippet content()}hi semi semi semi semi semi semi semi{/snippet}
    </Tooltip>
</div>

<script lang="ts">
    import { Button, Popconfirm, Tooltip } from '@fibrae/semi-ui-svelte';
</script>

<Popconfirm style="width: 320px">
    {#snippet child({ props })}
        <span {...props} style="display: inline-block" tabindex="-1">
            <Tooltip>
                {#snippet child({ props })}
                    <Button {...props} type="danger">删除</Button>
                {/snippet}
                {#snippet content()}删除评价{/snippet}
            </Tooltip>
        </span>
    {/snippet}
    {#snippet title()}确认{/snippet}
    {#snippet content()}是否确认删除{/snippet}
</Popconfirm>

<script lang="ts">
    import { TypographyParagraph, TypographyText, TypographyTitle } from '@fibrae/semi-ui-svelte';
</script>

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