Tui

<template>
  <div class="component-card-demo-wrap">
    <TsTooltip  trigger="click" content="点我就出来了" :placements="['top-center', 'right-center']">
      <TsButton>点击这里展示</TsButton>
    </TsTooltip>
    <TsTooltip trigger="hover" content="悬浮就出来了" :placements="['top-center', 'right-center']">
      <TsButton type="default">悬浮这里展示</TsButton>
    </TsTooltip>
  </div>
</template>

<script setup lang="ts">
import { TsTooltip } from 'tui';
</script>

<template>
  <div class="component-card-demo-wrap slot-dark-demo">
    <TsTooltip trigger="click" effect="dark" :placements="['top-center', 'right-center']">
      <template #content>
        <div class="slot-dark-content">
          <div class="slot-dark-title">自定义内容（dark）</div>
          <TsInput v-model="inputValue" placeholder="请输入内容" />
          <TsButton style="margin-top: 8px;" size="small">确认</TsButton>
        </div>
      </template>
      <TsButton type="primary">点击查看自定义内容</TsButton>
    </TsTooltip>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsInput } from 'tui';

const inputValue = ref('');
</script>

<style scoped>
.slot-dark-demo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.slot-dark-content {
  width: 220px;
}

.slot-dark-title {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(255, 255, 255, 0.78);
}
</style>

<template>
  <div class="component-card-demo-wrap controlled-visible-demo">
    <div class="controlled-visible-toolbar">
      <TsSwitch v-model="visible" />
      <span class="controlled-visible-text">visible: {{ visible }}</span>
    </div>

    <TsTooltip
      trigger="click"
      :visible="visible"
      content="受控模式：只由 visible 控制，hover/click 不会直接改状态"
      :placements="['top-center', 'right-center']"
    >
      <TsButton type="default">受控 Tooltip（尝试 hover / click）</TsButton>
    </TsTooltip>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { TsButton, TsSwitch } from 'tui';

const visible = ref(false);
</script>

<style scoped>
.controlled-visible-demo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.controlled-visible-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.controlled-visible-text {
  font-size: 13px;
  color: var(--bussiness-text-color-regular);
}
</style>

<template>
  <div class="component-card-demo-wrap">
    <TsTooltip :arrow="false" content="隐藏箭头的效果" :placements="['top-center']">
      <TsButton>隐藏arrow的效果</TsButton>
    </TsTooltip>
  </div>
</template>

<template>
  <div class="component-card-demo-wrap">
    <div class="placement-wrap">
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['left-start']">
        <TsButton type="default" class="left-start-position">left-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['left-center']">
        <TsButton type="default" class="left-center-position">left-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['left-end']">
        <TsButton type="default" class="left-end-position">left-end</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="top-start Text" :placements="['top-start']">
        <TsButton type="default" class="top-start-position">top-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['top-center']">
        <TsButton type="default" class="top-center-position">top-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['top-end']">
        <TsButton type="default" class="top-end-position">top-end</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['right-start']">
        <TsButton type="default" class="right-start-position">right-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['right-center']">
        <TsButton type="default" class="right-center-position">right-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['right-end']">
        <TsButton type="default" class="right-end-position">right-end</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['bottom-start']">
        <TsButton type="default" class="bottom-start-position">bottom-start</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['bottom-center']">
        <TsButton type="default" class="bottom-center-position">bottom-center</TsButton>
      </TsTooltip>
      <TsTooltip effect="dark" content="Tooltip Text" :placements="['bottom-end']">
        <TsButton type="default" class="bottom-end-position">bottom-end</TsButton>
      </TsTooltip>
    </div>
  </div>
</template>
<style scoped>
.placement-wrap {
  position: relative;
  height: 200px;
  width: 560px;
  margin: auto;
}
.placement-wrap .ts-button {
  width: 105px;
}

.left-start-position {
  position: absolute;
  left: 0;
  top: 40px;
}

.left-center-position {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.left-end-position {
  position: absolute;
  left: 0;
  bottom: 40px;
}

.top-start-position {
  position: absolute;
  top: 0;
  left: 115px;
}

.top-center-position {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.top-end-position {
  position: absolute;
  top: 0;
  right: 115px;
}

.right-start-position {
  position: absolute;
  right: 0;
  top: 40px;
}

.right-center-position {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.right-end-position {
  position: absolute;
  right: 0;
  bottom: 40px;
}

.bottom-start-position {
  position: absolute;
  bottom: 0;
  left: 115px;
}

.bottom-center-position {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.bottom-end-position {
  position: absolute;
  bottom: 0;
  right: 115px;
}
</style>