<template>
  <div class="tooltip">
    <YaTooltip
      placement="top"
      trigger="hover"
      :content="title"
      :enterable="false"
      :hide-after="0"
    >
      <svg
        t="1660879085342"
        class="icon QuestionFilled"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2208"
        width="14"
        height="14"
      >
        <path
          d="M543.317333 650.837333c-6.656 8.106667-15.189333 13.909333-19.114666 12.202667-3.754667-1.450667-5.973333-5.888-4.864-10.24l53.845333-197.034667a43.52 43.52 0 0 0-5.717333-34.218666 34.986667 34.986667 0 0 0-27.733334-16.213334 140.373333 140.373333 0 0 0-91.392 72.106667 217.6 217.6 0 0 0 0 24.064l32.256-43.008c6.741333-8.106667 14.677333-13.909333 18.602667-12.544 4.010667 1.877333 6.144 6.826667 4.864 11.52L450.133333 653.653333c-6.058667 22.698667 5.546667 45.312 34.133334 50.432 41.813333 0 66.730667-31.146667 91.306666-71.424a215.296 215.296 0 0 0 0-24.746666l-32.256 43.008zM543.744 256c-17.664 0.170667-31.914667 17.066667-31.744 37.632 0.170667 20.650667 14.592 37.205333 32.256 37.034667 17.664-0.170667 31.914667-17.066667 31.744-37.632a39.68 39.68 0 0 0-9.386667-26.624A29.013333 29.013333 0 0 0 543.829333 256z"
          p-id="2209"
        ></path>
        <path
          d="M512 53.333333a458.666667 458.666667 0 1 0 0 917.333334A458.666667 458.666667 0 0 0 512 53.333333z m0 64a394.666667 394.666667 0 1 1 0 789.333334 394.666667 394.666667 0 0 1 0-789.333334z"
          p-id="2210"
        ></path>
      </svg>
    </YaTooltip>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps } from 'vue';
interface props {
  title?: String; // 标题
}
const { title = '' } = defineProps<props>();
</script>

<style lang="scss" scoped>
.tooltip {
  position: relative;
  top: 2px;
  left: 2px;
}
</style>
