Adding Tooltip trigger element between <tooltip> tags results in "x.call is not a function" error

[pdnelson]

Describe the bug When using tooltips, placing an element between the tooltip tags results in the following console error: x.call is not a function.

For example, this code block will throw the above error:

<tooltip trigger="hover" text="test">
  <i class="fa fa-info-circle" />
</tooltip>

But this will not throw any errors, and will render properly:

<i id="identifier" class="fa fa-info-circle" />
<tooltip trigger="hover" target="#identifier" text="test"/>

To Reproduce Steps to reproduce the behavior:

1. Attempt to load page with the top code block.
2. See console error

Expected behavior Both of the above code blocks should behave identically.

Desktop (please complete the following information):

• OS: Mac OS Big Sur, v11.2.3
• Browser: Firefox
• Version: 115.0.2

Additional context This is occurring on UIV 2.0.6 with Vue 3.3.4.

[pdnelson]

This same error also occurs with the popover component when using the template and slot. A workaround for the time being is using the content prop instead. This is likely related to the tooltip error, and may indicate the bug is in popup.mixin.js, which both tooltip and popover share.

[wxsms]

same as #831 , please provide a repro link. thanks.

[tuckerzp]

please provide a repro link. thanks.

@wxsms I am also having this bug and have been able to replicate it when in compatibility mode for switching to Vue 3. To replicate, I followed the Vue quickstart guide and ran npm create vue@latest with "no" for each option. I then installed uiv and updated the App.vue & vite.config.js files to look like the following below.

/* App.vue */
<template>
  <tooltip text="test">
    <i>Text</i>
  </tooltip>
</template>

/* vite.config.js */
import vue from '@vitejs/plugin-vue'

// vite.config.js
export default {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2
          }
        }
      }
    })
  ]
}

Here is the error I get:

Uncaught TypeError: l.call is not a function                                      uiv.es.js:2260:69

[wxsms]

Looks like it should be an issue of @vue/compat, anyway I fixed it here.