### Description On Vue3 using `GlTooltip` as a component with a `ref` to target the element does not work. ```html <gl-icon ref="infoIcon" aria-label="Info" name="information-o" variant="info" /> <gl-tooltip :target="() => $refs.infoIcon" >Something or what not</gl-tooltip > ``` The above will result in the `icon` being rendered, but the tooltip will never trigger. I suspect it has something to do with the was Vue 3 treats `refs`. #### Figma file <!-- If design specs exist in Figma, link them below. Otherwise, remove the link and add a link to the issue to add the component to Figma --> [View design specs in Figma →](ADD LINK TO FIGMA FILE/FRAME) ### Checklist Make sure the following are completed before closing the issue: 1. [ ] Assign the correct component label to this issue. 1. [ ] Create an MR with the additions or updates needed. 1. [ ] Be sure to get your MR reviewed by a [FE/UX Foundations designer][foundations-team]. 1. [ ] When applicable, create an [MR in Pajamas][pajamas-mr] to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas][pajamas-issue] and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one. 1. [ ] When applicable, [create an MR in Pajamas][pajamas-mr] to update the component status. 1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Component Documentation"][pajamas-component-documentation-template] issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. 1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Figma update"][pajamas-figma-update-template] issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling. 1. [ ] When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review][eng-week-in-review-doc]. 1. [ ] 🎉 Congrats, you made it! You can now close this issue. <!-- ### Resources * [Compontent Lifecycle][component-lifecycle] * [Adding component][adding-components] * [Adding CSS][adding-css] * [Breaking changes][breaking-changes] --> [foundations-team]: https://about.gitlab.com/company/team/?department=fe-ux-foundations-team [pajamas-mr]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new [pajamas-issue]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new [pajamas-component-documentation-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation [pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update [component-lifecycle]: https://design.gitlab.com/get-started/lifecycle [adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md [adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md [breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md [eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit