Getting error when using Quasar component inside a custom functional component

Question

I'm using Quasar 1.6.1 with the autoload option (It autoloads the quasar components I use without me needing to define them). I wrote a custom functional component that uses <q-tooltip>, but when I try to run it I get this error:

Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

If I don't use a functional component it works.

<template functional>
  <div class="item q-mb-sm">
    <div class="text-small text-grey-6">{{ props.label }}</div>
    <div v-if="!props.longText">{{ props.text }}</div>
    <div v-else class="row q-gutter-sm">
      <div class="ellipsis col">
        {{ props.text }}
      </div>
      <div class="cursor-pointer">
        <img src="~assets/copy.svg" alt="copy" />
        <q-tooltip :offset="[5, 5]" anchor="top middle" self="bottom middle">
          Copy
        </q-tooltip>
      </div>
    </div>
  </div>
</template>

Answer 1

I think you need to register the QTooltip component in quasar.confg.js.

framework: {
      components: [  
      'QTooltip',
   ]
}

Component - I have tested this component it's working fine for me.

<template functional>
  <div class="q-mb-sm">
    <q-btn color="secondary" class="text-capitalize">Copy
      <q-tooltip :offset="[5, 5]" anchor="top middle" self="bottom middle">
        Copy
      </q-tooltip>
    </q-btn>
    {{props.test}}
  </div>
</template>

<script>
    export default {
        name: "test",
        props: ['test']
    }
</script>

<style scoped>

</style>

demo - https://codesandbox.io/s/sharp-darwin-7h17m