Tooltip 文字提示 ​

<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <w-tooltip
        class="box-item"
        content="Top Left prompts info"
        placement="top-start"
      >
        <w-button>top-start</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Top Center prompts info"
        placement="top"
      >
        <w-button>top</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Top Right prompts info"
        placement="top-end"
      >
        <w-button>top-end</w-button>
      </w-tooltip>
    </div>
    <div class="row">
      <w-tooltip
        class="box-item"
        content="Left Top prompts info"
        placement="left-start"
      >
        <w-button>left-start</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Right Top prompts info"
        placement="right-start"
      >
        <w-button>right-start</w-button>
      </w-tooltip>
    </div>
    <div class="row">
      <w-tooltip
        class="box-item"
        content="Left Center prompts info"
        placement="left"
      >
        <w-button class="mt-3 mb-3">left</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Right Center prompts info"
        placement="right"
      >
        <w-button>right</w-button>
      </w-tooltip>
    </div>
    <div class="row">
      <w-tooltip
        class="box-item"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <w-button>left-end</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <w-button>right-end</w-button>
      </w-tooltip>
    </div>
    <div class="row center">
      <w-tooltip
        class="box-item"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <w-button>bottom-start</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <w-button>bottom</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <w-button>bottom-end</w-button>
      </w-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>
  <w-tooltip content="Top center" placement="top" effect="dark">
    <w-button>Dark</w-button>
  </w-tooltip>
  <w-tooltip content="Bottom center" placement="bottom">
    <w-button>Light</w-button>
  </w-tooltip>

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

<style>
.w3-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));
}

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

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

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

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

const disabled = ref(false)
</script>

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

<template>
  <w-tooltip
    v-model:visible="visible"
    content="Bottom center"
    placement="bottom"
    effect="light"
    trigger="click"
    virtual-triggering
    :virtual-ref="triggerRef"
  />
  <w-button @click="visible = !visible">test</w-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>
    <w-button
      v-for="i in 3"
      :key="i"
      @mouseover="(e) => (buttonRef = e.currentTarget)"
      @click="visible = !visible"
      >Click 激活</w-button
    >
  </div>

  <w-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> 内容 </span>
    </template>
  </w-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(--w3-transition-function-fast-bezier);
}
</style>

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

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

const visible = ref(false)
</script>

<template>
  <w-tooltip content="I am an w-tooltip" transition="slide-fade">
    <w-button>trigger me</w-button>
  </w-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>