Tooltip

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

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

<template>
    <Space>
        <Tooltip>
            <Tag :style="style">Component</Tag>
            <template #content>semi design</template>
        </Tooltip>
        <Tooltip>
            Text
            <template #content>semi design</template>
        </Tooltip>
        <Tooltip>
            <span :style="style">DOM</span>
            <template #content>semi design</template>
        </Tooltip>
    </Space>
</template>

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

    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>

<template>
    <div>
        <div :style="{ marginLeft: '80px', whiteSpace: 'nowrap' }">
            <Tooltip v-for="[position, label] in tops" :key="position" :arrowPointAtCenter="false" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px' }">{{ label }}</Tag>
                <template #content>
                    <article>
                        <p>hi bytedance</p>
                        <p>hi bytedance</p>
                    </article>
                </template>
            </Tooltip>
        </div>
        <div :style="{ width: '80px', float: 'left' }">
            <Tooltip v-for="[position, label] in lefts" :key="position" :arrowPointAtCenter="false" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px', width: '60px' }">{{ label }}</Tag>
                <template #content>
                    <article>
                        <p>hi bytedance</p>
                        <p>hi bytedance</p>
                    </article>
                </template>
            </Tooltip>
        </div>
        <div :style="{ width: '40px', marginLeft: '300px' }">
            <Tooltip v-for="[position, label] in rights" :key="position" :arrowPointAtCenter="false" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px', width: '60px' }">{{ label }}</Tag>
                <template #content>
                    <article>
                        <p>hi bytedance</p>
                        <p>hi bytedance</p>
                    </article>
                </template>
            </Tooltip>
        </div>
        <div :style="{ marginLeft: '80px', clear: 'both', whiteSpace: 'nowrap' }">
            <Tooltip v-for="[position, label] in bottoms" :key="position" :arrowPointAtCenter="false" :position="position">
                <Tag :style="{ margin: '8px', padding: '20px', width: '60px' }">{{ label }}</Tag>
                <template #content>
                    <article>
                        <p>hi bytedance</p>
                        <p>hi bytedance</p>
                    </article>
                </template>
            </Tooltip>
        </div>
    </div>
</template>

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

<template>
    <div>
        <Tooltip position="topLeft">
            <Button :style="{ marginRight: '8px' }" type="secondary">指向元素中心</Button>
            <template #content>semi design tooltip</template>
        </Tooltip>
    </div>

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

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

    const visible = ref<RadioValue | undefined>(0);
</script>

<template>
    <div>
        <Tooltip>
            <Button :style="{ marginBottom: '20px' }" theme="solid" type="tertiary">悬停显示</Button>
            <template #content>hi bytedance</template>
        </Tooltip>
        <br />
        <Tooltip trigger="click">
            <Button :style="{ marginBottom: '20px' }">点击显示</Button>
            <template #content>hi bytedance</template>
        </Tooltip>
        <br />
        <Tooltip trigger="focus">
            <Input aria-label="聚焦显示" placeholder="聚焦显示" :style="{ width: '100px', marginBottom: '20px' }" />
            <template #content>hi bytedance</template>
        </Tooltip>
        <br />
        <Tooltip trigger="contextMenu">
            <Button :style="{ marginBottom: '20px' }" theme="solid" type="secondary">右键点击展示</Button>
            <template #content>hi bytedance</template>
        </Tooltip>
        <br />
        <Tooltip trigger="custom" :visible="visible === 1">
            <span :style="{ display: 'inline-block' }">
                <RadioGroup v-model="visible" type="button">
                    <Radio :value="1">受控显示</Radio>
                    <Radio :value="0">受控隐藏</Radio>
                </RadioGroup>
            </span>
            <template #content>hi bytedance</template>
        </Tooltip>
    </div>
</template>

<script setup lang="ts">
    import { computed, ref } from 'vue';
    import { Button, Space, Switch, Tooltip, Typography } from '@fibrous/semi-ui-vue';

    const { Text } = Typography;
    const enabled = ref(true);
    const content = computed(() => `condition is ${enabled.value ? 'true' : 'false'}`);
</script>

<template>
    <Space align="center">
        <Text id="tooltip-condition-label">condition</Text>
        <Switch v-model="enabled" aria-labelledby="tooltip-condition-label" />
        <Tooltip :condition="enabled" trigger="hover">
            <Button>Hover me</Button>
            <template #content>{{ content }}</template>
        </Tooltip>
        <Tooltip :condition="enabled" trigger="click">
            <Button>Click me</Button>
            <template #content>{{ content }}</template>
        </Tooltip>
    </Space>
</template>

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

<template>
    <div>
        <Tooltip class="another-classname" :style="{ maxWidth: '320px' }">
            <Tag :style="{ marginRight: '8px' }">Custom Style And ClassName</Tag>
            <template #content>hi semi semi semi semi semi semi semi</template>
        </Tooltip>
    </div>
</template>

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

<template>
    <Popconfirm :style="{ width: '320px' }">
        <span :style="{ display: 'inline-block' }">
            <Tooltip>
                <Button type="danger">删除</Button>
                <template #content>删除评价</template>
            </Tooltip>
        </span>
        <template #title>确认</template>
        <template #content>是否确认删除</template>
    </Popconfirm>
</template>

<script setup lang="ts">
    import { Typography } from '@fibrous/semi-ui-vue';

    const { Paragraph, Title, Text } = Typography;
</script>

<template>
    <div>
        <Title :ellipsis="{ showTooltip: true }" :heading="5" :style="{ width: '250px' }"> 是一个很长很长很长很长5号标题 </Title>
        <br />
        <Text :ellipsis="{ showTooltip: true, pos: 'middle' }" link :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>
</template>