vuejs3 - antd vue3 tooltip not showing arrow

Question

i'm trying to use the antd tooltip with vue3

<a-tooltip :mouseEnterDelay="1">
   <template #title> prompt text </template>
   <a-button type="danger" shape="circle" @click="handleDelete(record.id)">
     <template #icon><DeleteOutlined /></template>
   </a-button>
</a-tooltip>

the code looks ok, but this is the result:

kinda ugly, i'm also using the same version of the docs:

"dependencies": {
  "ant-design-vue": "^2.0.0-rc.6",
  "axios": "^0.21.1",
  "lockr": "^0.8.5",
  "lodash": "^4.17.20",
  "vue": "^3.0.0",
  "vue-i18n": "^9.0.0-beta.17",
  "vue-router": "^4.0.0-0",
  "vuex": "^4.0.0-0"
},

edit: added main.ts full code.

import { createApp } from 'vue'
import App from '@/App.vue'
import router from '@/router'
import store from '@/store'
import 'ant-design-vue/dist/antd.css'
import '@/style/index.scss'
import { createI18n } from 'vue-i18n'
import messages from '@/assets/i18n.json'
import { Layout, Menu, Select, Avatar, Dropdown, Tag, Divider, Table, Tooltip, Button, message, Popconfirm } from 'ant-design-vue'

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  messages
})

const app = createApp(App)
app.config.globalProperties.$message = message

app
  .use(i18n)
  .use(store)
  .use(router)

  .use(Layout)
  //...all the other use of ant

  .mount('#app')

anyone can help?

Answer 1

等待大神答复