Tooltip 文字提示 ​

<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <u-tooltip
        class="box-item"
        effect="dark"
        content="Top Left prompts info"
        placement="top-start"
      >
        <u-button>top-start</u-button>
      </u-tooltip>
      <u-tooltip
        class="box-item"
        effect="dark"
        content="Top Center prompts info"
        placement="top"
      >
        <u-button>top</u-button>
      </u-tooltip>
      <u-tooltip
        class="box-item"
        effect="dark"
        content="Top Right prompts info"
        placement="top-end"
      >
        <u-button>top-end</u-button>
      </u-tooltip>
    </div>
    <div class="row">
      <u-tooltip class="box-item" effect="dark" placement="left-start">
        <template #content>
          Left Top
          <br />
          prompts info
        </template>
        <u-button>left-start</u-button>
      </u-tooltip>
      <u-tooltip class="box-item" effect="dark" placement="right-start">
        <template #content>
          Right Top
          <br />
          prompts info
        </template>
        <u-button>right-start</u-button>
      </u-tooltip>
    </div>
    <div class="row">
      <u-tooltip class="box-item" effect="dark" placement="left">
        <template #content>
          Left Center
          <br />
          prompts info
        </template>
        <u-button class="mt-3 mb-3">left</u-button>
      </u-tooltip>
      <u-tooltip class="box-item" effect="dark" placement="right">
        <template #content>
          Right Center
          <br />
          prompts info
        </template>
        <u-button>right</u-button>
      </u-tooltip>
    </div>
    <div class="row">
      <u-tooltip class="box-item" effect="dark" placement="left-end">
        <template #content>
          Left Bottom
          <br />
          prompts info
        </template>
        <u-button>left-end</u-button>
      </u-tooltip>
      <u-tooltip class="box-item" effect="dark" placement="right-end">
        <template #content>
          Right Bottom
          <br />
          prompts info
        </template>
        <u-button>right-end</u-button>
      </u-tooltip>
    </div>
    <div class="row center">
      <u-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <u-button>bottom-start</u-button>
      </u-tooltip>
      <u-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <u-button>bottom</u-button>
      </u-tooltip>
      <u-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <u-button>bottom-end</u-button>
      </u-tooltip>
    </div>
  </div>
</template>

<style>
.tooltip-base-box {
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  width: 110px;
  margin-top: 10px;
}
</style>

<template>
  <u-tooltip content="Top center" placement="top">
    <u-button>Dark</u-button>
  </u-tooltip>
  <u-tooltip content="Bottom center" placement="bottom" effect="light">
    <u-button>Light</u-button>
  </u-tooltip>

  <u-tooltip content="Bottom center" effect="customized">
    <u-button>Customized theme</u-button>
  </u-tooltip>
</template>

<style>
.u-popper.is-customized {
  /* Set padding to ensure the height is 32px */
  padding: 6px 12px;
  background: linear-gradient(90deg, rgb(159, 229, 151), rgb(204, 229, 129));
}

.u-popper.is-customized .u-popper__arrow::before {
  background: linear-gradient(45deg, #b2e68d, #bce689);
  right: 0;
}
</style>

<template>
  <u-tooltip placement="top">
    <template #content> multiple lines<br />second line </template>
    <u-button>Top center</u-button>
  </u-tooltip>
</template>

<template>
  <u-tooltip
    :disabled="disabled"
    content="click to close tooltip function"
    placement="bottom"
    effect="light"
  >
    <u-button @click="disabled = !disabled">
      click to {{ disabled ? 'active' : 'close' }} tooltip function
    </u-button>
  </u-tooltip>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const disabled = ref(false)
</script>

<template>
  <u-tooltip
    content="<span>The content can be <strong>HTML</strong></span>"
    raw-content
  >
    <u-button>hover me</u-button>
  </u-tooltip>
</template>

<template>
  <u-tooltip
    :visible="visible"
    content="Bottom center"
    placement="bottom"
    effect="light"
    trigger="click"
    virtual-triggering
    :virtual-ref="triggerRef"
  />
  <u-button @click="visible = !visible">test</u-button>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'

const visible = ref(false)
const position = ref({
  top: 0,
  left: 0,
  bottom: 0,
  right: 0,
} as DOMRect)

const triggerRef = ref({
  getBoundingClientRect: () => position.value,
})

const mousemoveHandler = ({ clientX, clientY }: MouseEvent) => {
  position.value = DOMRect.fromRect({
    x: clientX,
    y: clientY,
  })
}

onMounted(() => {
  document.addEventListener('mousemove', mousemoveHandler)
})

onUnmounted(() => {
  document.removeEventListener('mousemove', mousemoveHandler)
})
</script>

<template>
  <div>
    <u-button
      v-for="i in 3"
      :key="i"
      @mouseover="(e) => (buttonRef = e.currentTarget)"
      @click="visible = !visible"
      >Click to open tooltip</u-button
    >
  </div>

  <u-tooltip
    ref="tooltipRef"
    :visible="visible"
    :popper-options="{
      modifiers: [
        {
          name: 'computeStyles',
          options: {
            adaptive: false,
            enabled: false,
          },
        },
      ],
    }"
    :virtual-ref="buttonRef"
    virtual-triggering
    popper-class="singleton-tooltip"
  >
    <template #content>
      <span> Some content </span>
    </template>
  </u-tooltip>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const buttonRef = ref()
const tooltipRef = ref()

const visible = ref(false)
</script>

<style>
.singleton-tooltip {
  transition: transform 0.3s var(--u-transition-function-fast-bezier);
}
</style>

<template>
  <u-tooltip :visible="visible">
    <template #content>
      <span>Content</span>
    </template>
    <u-button @mouseenter="visible = true" @mouseleave="visible = false">
      Hover me
    </u-button>
  </u-tooltip>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <u-tooltip content="I am an el-tooltip" transition="slide-fade">
    <u-button>trigger me</u-button>
  </u-tooltip>
</template>

<script lang="ts" setup></script>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(120px);
  opacity: 0;
}
</style>

<template>
  <u-tooltip
    :append-to="targetElement"
    trigger="click"
    content="Append to .target"
    placement="top"
  >
    <u-button class="target">Click to open tooltip</u-button>
  </u-tooltip>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const targetElement = ref('')

onMounted(() => {
  targetElement.value = '.target'
})
</script>

<style scoped>
.target {
  position: relative;
  margin-top: 20px;
}
</style>