VAVABUY/components/tooltip.vue

<template>
  <view class="tips">
    <view class="tips_title" v-if="show">{{ t(title) }}</view>
    <view class="tip_cont">
      <slot></slot>
    </view>
  </view>
</template>
<script setup>
import { t } from "@/locale"
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  show: Boolean
})
</script>
<style lang="less" scoped>
.tips {
  position: relative;

  .tips_title {
    max-width: 80vw;
    background-color: #303133;
    color: var(--light);
    padding: 10rpx 22rpx;
    border-radius: 8rpx;
    font-size: 24rpx;
    position: absolute;
    top: -60rpx;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    text-wrap: nowrap;

    &::before {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -12rpx;
      transform: translateX(-50%);
      border-left: 14rpx solid transparent;
      border-right: 14rpx solid transparent;
      border-top: 14rpx solid #303133;
    }
  }
}
</style>