Tooltip 文字提示 ​

<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <w-tooltip
        class="box-item"
        content="该药品需餐前 30 分钟服用"
        placement="top-start"
      >
        <w-button>top-start</w-button>
      </w-tooltip>
      <w-tooltip class="box-item" content="请核对患者腕带信息" placement="top">
        <w-button>top</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="注意询问药物过敏史"
        placement="top-end"
      >
        <w-button>top-end</w-button>
      </w-tooltip>
    </div>
    <div class="row">
      <w-tooltip
        class="box-item"
        content="检查前需空腹 8 小时"
        placement="left-start"
      >
        <w-button>left-start</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="此检查项目需提前预约"
        placement="right-start"
      >
        <w-button>right-start</w-button>
      </w-tooltip>
    </div>
    <div class="row">
      <w-tooltip class="box-item" content="静脉推注速度宜慢" placement="left">
        <w-button class="mt-3 mb-3">left</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="服药期间建议多饮水"
        placement="right"
      >
        <w-button>right</w-button>
      </w-tooltip>
    </div>
    <div class="row">
      <w-tooltip
        class="box-item"
        content="注意观察生命体征变化"
        placement="left-end"
      >
        <w-button>left-end</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="准确记录 24 小时出入量"
        placement="right-end"
      >
        <w-button>right-end</w-button>
      </w-tooltip>
    </div>
    <div class="row center">
      <w-tooltip
        class="box-item"
        content="标本需 30 分钟内送检"
        placement="bottom-start"
      >
        <w-button>bottom-start</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="请佩戴口罩进入诊区"
        placement="bottom"
      >
        <w-button>bottom</w-button>
      </w-tooltip>
      <w-tooltip
        class="box-item"
        content="术后保持伤口干燥清洁"
        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="危急值已通知主治医师" placement="top" effect="dark">
    <w-button>危急值提示</w-button>
  </w-tooltip>
  <w-tooltip content="该检验项目次日出报告" placement="bottom">
    <w-button>报告时间</w-button>
  </w-tooltip>

  <w-tooltip content="VIP 诊室专属就诊引导" effect="customized">
    <w-button>自定义主题</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>
      药品：阿莫西林胶囊<br />用法：每次 0.5g，每日 3 次
    </template>
    <w-button>用药医嘱</w-button>
  </w-tooltip>
</template>

<template>
  <div class="tooltip-overflow-box">
    <w-tooltip placement="top" :max-width="200" :max-height="100">
      <template #content>
        {{ longText }}
      </template>
      <w-button>药品说明书摘要</w-button>
    </w-tooltip>

    <w-tooltip placement="top" :content="longText" :max-width="200">
      <w-button>检查注意事项</w-button>
    </w-tooltip>

    <w-tooltip placement="top" :content="shortText" :max-height="200">
      <w-button>内容未超限</w-button>
    </w-tooltip>
  </div>
</template>

<script lang="ts" setup>
const longText =
  '【药品说明书】本品为β-内酰胺类抗生素，适用于敏感菌所致的呼吸道、泌尿道、皮肤软组织感染。' +
  '成人常用量：每次 0.5g，每 6～8 小时一次，一日剂量不超过 4g。肾功能减退者需根据肌酐清除率调整剂量。' +
  '常见不良反应为皮疹、恶心、腹泻；对青霉素过敏者禁用。用药期间如出现严重腹泻需警惕伪膜性肠炎，应立即停药并就诊。'
const shortText = '该检查无需空腹，可正常进食。'
</script>

<style>
.tooltip-overflow-box {
  display: flex;
  gap: 10px;
  align-items: center;
}
</style>

<template>
  <w-tooltip
    :disabled="disabled"
    content="点击切换是否禁用该医嘱提示"
    placement="bottom"
    effect="light"
  >
    <w-button @click="disabled = !disabled">
      点击 {{ disabled ? '启用' : '禁用' }} 提示
    </w-button>
  </w-tooltip>
</template>

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

const disabled = ref(false)
</script>

<template>
  <w-tooltip content="<strong>过敏史</strong>：青霉素类、头孢类" raw-content>
    <w-button>查看过敏史</w-button>
  </w-tooltip>
</template>

<template>
  <w-tooltip
    v-model:visible="visible"
    content="鼠标跟随位置显示就诊号"
    placement="bottom"
    effect="light"
    trigger="click"
    virtual-triggering
    :virtual-ref="triggerRef"
  />
  <w-button @click="visible = !visible">点击显示就诊号</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,
          },
        },
      ],
    }"
    :max-width="200"
    :max-height="100"
    :virtual-ref="buttonRef"
    virtual-triggering
    popper-class="singleton-tooltip"
  >
    <template #content>
      <span> {{ longText }} </span>
    </template>
  </w-tooltip>
</template>

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

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

const longText =
  '【药品说明书】本品为β-内酰胺类抗生素，适用于敏感菌所致的呼吸道、泌尿道、皮肤软组织感染。' +
  '成人常用量：每次 0.5g，每 6～8 小时一次，一日剂量不超过 4g。肾功能减退者需根据肌酐清除率调整剂量。' +
  '常见不良反应为皮疹、恶心、腹泻；对青霉素过敏者禁用。用药期间如出现严重腹泻需警惕伪膜性肠炎，应立即停药并就诊。'

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>该患者为高危妊娠，需重点监护</span>
    </template>
    <w-button @mouseenter="visible = true" @mouseleave="visible = false">
      悬停查看患者标记
    </w-button>
  </w-tooltip>
</template>

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

const visible = ref(false)
</script>

<template>
  <w-tooltip content="该检验结果已复核并审核签发" transition="slide-fade">
    <w-button>查看报告状态</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>