<template>
  <n-tooltip trigger="hover" content-style="max-width: 500px">
    <template #trigger>
      <n-button tertiary circle class="help" size="tiny">
        <template #icon>
          <n-icon>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              viewBox="0 0 512 512"
            >
              <path
                d="M160 164s1.44-33 33.54-59.46C212.6 88.83 235.49 84.28 256 84c18.73-.23 35.47 2.94 45.48 7.82C318.59 100.2 352 120.6 352 164c0 45.67-29.18 66.37-62.35 89.18S248 298.36 248 324"
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-miterlimit="10"
                stroke-width="40"
              ></path>
              <circle cx="248" cy="399.99" r="32" fill="currentColor"></circle>
            </svg>
          </n-icon>
        </template>
      </n-button>
    </template>
    <slot />
  </n-tooltip>
</template>

<style scoped>
.help {
  z-index: 100;
}
</style>
