🐛 [Bug]: TinyTooptip can not get inject content

[chilingling]

Version

3.20

Vue Version

3.4.21

Link to minimal reproduction

https://opentiny.design/vue-playground?mode=pc&theme=os#3.21|eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgbGFuZz1cInRzeFwiPlxyXG4vLyDlvJXlhaUgQG9wZW50aW55L3Z1ZSDnu4Tku7ZcclxuaW1wb3J0IHsgQnV0dG9uLCBMaW5rIH0gZnJvbSAnQG9wZW50aW55L3Z1ZSdcclxuXHJcbmV4cG9ydCBkZWZhdWx0IHtcclxuICBjb21wb25lbnRzOiB7XHJcbiAgICBUaW55QnV0dG9uOiBCdXR0b24sXHJcbiAgICBUaW55TGluazogTGlua1xyXG4gIH0sXHJcbiAgZGF0YSgpIHtcclxuICAgIHJldHVybiB7XHJcbiAgICAgIG1zZzogJ2hlbGxvIHdvcmxkISdcclxuICAgIH1cclxuICB9XHJcbn1cclxuPC9zY3JpcHQ+XHJcblxyXG48dGVtcGxhdGU+XHJcbiAgPFRpbnlCdXR0b24+56Gu5a6aPC9UaW55QnV0dG9uPlxyXG4gIDxoMT57eyBtc2cgfX08L2gxPlxyXG4gIDxkaXYgY2xhc3M9XCJ0aW55dnVlXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwidGlueXZ1ZS1wYWdlXCI+XHJcbiAgICAgIHRpbnl2dWVcclxuICAgICAgPHRpbnktbGluayB0eXBlPVwic3VjY2Vzc1wiIGhyZWY9J2h0dHBzOi8vZ2l0aHViLmNvbS9vcGVudGlueS90aW55LXZ1ZSc+XHJcbiAgICAgICAgdGlueXZ1ZVxyXG4gICAgICA8L3RpbnktbGluaz5cclxuICAgIDwvZGl2PlxyXG4gIDwvZGl2PlxyXG48L3RlbXBsYXRlPlxyXG5cclxuPHN0eWxlIGxhbmc9XCJsZXNzXCIgc2NvcGVkPlxyXG4gIGgxe1xyXG4gICAgY29sb3I6IzVlN2NlMDtcclxuICB9XHJcbiAgLnRpbnl2dWV7XHJcbiAgICBmb250LXNpemU6IDE4eHA7XHJcbiAgICAmLXBhZ2V7XHJcbiAgICAgIGNvbG9yOiM1ZTdjZTA7XHJcbiAgICB9XHJcbiAgfVxyXG48L3N0eWxlPlxyXG4iLCIiOiJ7XCJpbXBvcnRzXCI6e1widnVlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vdnVlLzMuNC4yNy9maWxlcy9kaXN0L3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCIsXCJlY2hhcnRzXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vZWNoYXJ0cy81LjQuMS9maWxlcy9kaXN0L2VjaGFydHMuZXNtLmpzXCIsXCJAdnVlL2NvbXBpbGVyLXNmY1wiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0B2dWUvY29tcGlsZXItc2ZjLzMuNC4yNy9maWxlcy9kaXN0L2NvbXBpbGVyLXNmYy5lc20tYnJvd3Nlci5qc1wiLFwiQG9wZW50aW55L3Z1ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjIxL2ZpbGVzL2Rpc3QzL3RpbnktdnVlLXBjLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1pY29uXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMjEvZmlsZXMvZGlzdDMvdGlueS12dWUtaWNvbi5tanNcIixcIkBvcGVudGlueS92dWUtbG9jYWxlXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS1ydW50aW1lLzMuMjEvZmlsZXMvZGlzdDMvdGlueS12dWUtbG9jYWxlLm1qc1wiLFwiQG9wZW50aW55L3Z1ZS1jb21tb25cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJ1bnRpbWUvMy4yMS9maWxlcy9kaXN0My90aW55LXZ1ZS1jb21tb24ubWpzXCIsXCJAb3BlbnRpbnkvdnVlLWRpcmVjdGl2ZVwiOlwiaHR0cHM6Ly9yZWdpc3RyeS5ucG1taXJyb3IuY29tL0BvcGVudGlueS92dWUtcnVudGltZS8zLjIxL2ZpbGVzL2Rpc3QzL3RpbnktdnVlLWRpcmVjdGl2ZS5tanNcIixcIkBvcGVudGlueS92dWUtdGhlbWUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS8zLjIxL2ZpbGVzL1wiLFwiQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvXCI6XCJodHRwczovL3JlZ2lzdHJ5Lm5wbW1pcnJvci5jb20vQG9wZW50aW55L3Z1ZS10aGVtZS1tb2JpbGUvMy4yMS9maWxlcy9cIixcIkBvcGVudGlueS92dWUtcmVuZGVybGVzcy9cIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9Ab3BlbnRpbnkvdnVlLXJlbmRlcmxlc3MvMy4yMS9maWxlcy9cIixcInNvcnRhYmxlanNcIjpcImh0dHBzOi8vcmVnaXN0cnkubnBtbWlycm9yLmNvbS9zb3J0YWJsZWpzLzEuMTUuMC9maWxlcy9tb2R1bGFyL3NvcnRhYmxlLmVzbS5qc1wifX0iLCJ0c2NvbmZpZy5qc29uIjoie1xyXG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcclxuICAgIFwiYWxsb3dKc1wiOiB0cnVlLFxyXG4gICAgXCJjaGVja0pzXCI6IHRydWUsXHJcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXHJcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxyXG4gICAgXCJtb2R1bGVcIjogXCJFU05leHRcIixcclxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcclxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZVxyXG4gIH0sXHJcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xyXG4gICAgXCJ0YXJnZXRcIjogMy4zXHJcbiAgfVxyXG59XHJcbiIsImJhc2ljLXVzYWdlLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGRpdiBjbGFzcz1cImJveFwiPlxuICAgIDxkaXYgY2xhc3M9XCJ0b3BcIj5cbiAgICAgIDx0aW55LXRvb2x0aXAgY2xhc3M9XCJpdGVtXCIgZWZmZWN0PVwiZGFya1wiIGNvbnRlbnQ9XCJUb3AgTGVmdCDmj5DnpLrmloflrZdcIiBwbGFjZW1lbnQ9XCJ0b3Atc3RhcnRcIj5cbiAgICAgICAgPHRpbnktYnV0dG9uPuS4iuW3pjwvdGlueS1idXR0b24+XG4gICAgICAgIDx0ZW1wbGF0ZSAjY29udGVudD5cbiAgICAgICAgICA8dGVzdC1jb21wPjwvdGVzdC1jb21wPlxuICAgICAgICA8L3RlbXBsYXRlPlxuICAgICAgPC90aW55LXRvb2x0aXA+XG4gICAgICA8dGlueS1wb3BvdmVyIHBsYWNlbWVudD1cInRvcC1zdGFydFwiIHRpdGxlPVwi5qCH6aKYXCIgY29udGVudD1cIui/meaYr+S4gOauteWGheWuueOAglwiIHdpZHRoPVwiMjAwXCI+XG4gICAgICAgIDx0ZW1wbGF0ZSAjcmVmZXJlbmNlPlxuICAgICAgICAgIDxoMT7ngrnlh7vmiJHmj5DnpLoxPC9oMT5cbiAgICAgICAgPC90ZW1wbGF0ZT5cbiAgICAgICAgPHRlc3QtY29tcC1wb3BvdmVyPjwvdGVzdC1jb21wLXBvcG92ZXI+XG4gICAgICA8L3RpbnktcG9wb3Zlcj5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuXG48c2NyaXB0IHNldHVwIGxhbmc9XCJqc3hcIj5cbmltcG9ydCB7IHByb3ZpZGUgfSBmcm9tICd2dWUnXG5pbXBvcnQgeyBUaW55VG9vbHRpcCwgVGlueUJ1dHRvbiwgVGlueVBvcG92ZXIgfSBmcm9tICdAb3BlbnRpbnkvdnVlJ1xuaW1wb3J0IFRlc3RDb21wIGZyb20gJy4vVGVzdENvbXAudnVlJ1xuaW1wb3J0IFRlc3RDb21wUG9wb3ZlciBmcm9tICcuL1Rlc3RDb21wUG9wb3Zlci52dWUnXG4gIFxucHJvdmlkZSgndGVzdCcsICdhYWFhYScpXG4gIFxuPC9zY3JpcHQ+XG5cbjxzdHlsZSBsYW5nPVwiY3NzXCIgc2NvcGVkPlxuLmJveCB7XG4gIG1hcmdpbjogYXV0bztcbn1cblxuLmJveCAudG9wIHtcbiAgdGV4dC1hbGlnbjogY2VudGVyO1xufVxuXG4uYm94IC5sZWZ0IHtcbiAgZmxvYXQ6IGxlZnQ7XG4gIHdpZHRoOiA5MHB4O1xufVxuXG4uYm94IC5yaWdodCB7XG4gIGZsb2F0OiByaWdodDtcbiAgd2lkdGg6IDkwcHg7XG59XG5cbi5ib3ggLmJvdHRvbSB7XG4gIGNsZWFyOiBib3RoO1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7XG59XG5cbi5ib3ggLml0ZW0ge1xuICBtYXJnaW46IDRweDtcbiAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xufVxuPC9zdHlsZT5cbiIsInNyYy9UZXN0Q29tcC52dWUiOiI8dGVtcGxhdGU+XG4gIDxkaXY+XG4gICAg6L+Z6YeM5piv5o+Q56S65YaF5a65XG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbiAgaW1wb3J0IHsgaW5qZWN0IH0gZnJvbSAndnVlJ1xuICBcbiAgY29uc3QgdGVzdCA9IGluamVjdCgndGVzdCcpXG4gIFxuICBjb25zb2xlLmxvZygndGVzdCcsIHRlc3QpXG48L3NjcmlwdD4iLCJzcmMvVGVzdENvbXBQb3BvdmVyLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbiAgPGRpdj5cbiAgICDov5nph4zmmK/mj5DnpLrlhoXlrrkxXG4gIDwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbiAgaW1wb3J0IHsgaW5qZWN0IH0gZnJvbSAndnVlJ1xuICBcbiAgY29uc3QgdGVzdCA9IGluamVjdCgndGVzdCcpXG4gIFxuICBjb25zb2xlLmxvZygncG9wb3ZlcnRlc3QnLCB0ZXN0KVxuPC9zY3JpcHQ+IiwiX28iOnt9fQ==

Step to reproduce

1. TinyTooltip template：

<template>
        <tiny-tooltip class="item" effect="dark" content="Top Left 提示文字" placement="top-start">
        <tiny-button>上左</tiny-button>
        <template #content>
          <test-comp></test-comp>
        </template>
      </tiny-tooltip>
</template>

2. TestComp content：

<template>
  <div>
    这里是提示内容
  </div>
</template>

<script setup>
  import { inject } from 'vue'
  
  const test = inject('test')
  
  console.log('test', test)
</script>

3. log result： test undefined

What is expected

should get provide content correct: test

What is actually happening

get undefined

What is your project name

TinyEngine

Any additional comments (optional)

No response

[petercat-assistant[bot]]

It seems you are experiencing an issue with the TinyTooltip component not being able to inject content properly. The problem arises when trying to use Vue's inject function to retrieve a provided value, but it returns undefined.

Possible Causes and Solutions:

1. Provider Missing: Ensure that the provide function is used correctly in an ancestor component to supply the test value. Without a provider, inject will not be able to retrieve the value.

   <script setup>
   import { provide } from 'vue';
   
   provide('test', 'yourValue');
   </script>
   

2. Scope of Provide/Inject: Make sure that the component providing the value is an ancestor of the component trying to inject it. The provide and inject APIs work within the component hierarchy, so the provider must be higher up in the component tree than the consumer.

3. Correct Key Usage: Double-check that the key used in provide matches the key used in inject. They are case-sensitive and must be identical.

4. Component Lifecycle: Ensure that the provide is set up before the inject is called. This typically means setting up the provider in a parent component that is rendered before the child component.

If you have verified these aspects and the issue persists, please provide more details about the component hierarchy or any additional context that might help in diagnosing the problem further.

If you need further assistance, feel free to ask!

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.

[shenjunjian]

popover能正常注入值，由于popover的弹出层是在模板中写定的，是vue的机制渲染出来的 tooltip不能注入值，由于它的弹出层是通过createComponent来创建的，绕过了vue的机制。并且这个时机不在setup的时机里，是在mount之后才触发的popper的加载

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Popover can inject values ​​normally, because the popover popover layer is written in the template and is rendered by the vue mechanism. tooltip cannot inject values, because its pop-up layer is created through createComponent, bypassing the vue mechanism. And this time is not in the setup time, it is the loading of the popper that is triggered after mount.