fix(BPopover and Btooltip): Fixes bootstrap-vue-next#1232 - do not create a new app fro each tooltip or popover

[james-muriithi]

Describe the PR

The PR fixes #1232 (One App for each tooltip), by eliminating the need to create a new app for each tooltip or popover. I used the render function from Vue to achieve this. One issue I experienced with this method was it did not update when props changed.

To get around this I had to remove the old rendered component, then re-render it on update

Small replication

check #1232

PR checklist

What kind of change does this PR introduce? (check at least one)

• Bugfix 🐛 - fix(...)
• Feature - feat(...)
• ARIA accessibility - fix(...)
• Documentation update - docs(...)
• Other (please describe)

The PR fulfills these requirements:

• Pull request title and all commits follow the Conventional Commits convention or has an override in this pull request body This is very important, as the CHANGELOG is generated from these messages, and determines the next version type. Pull requests that do not follow conventional commits or do not have an override will be denied

PS: this is my first open-source contribution, please be easy on me :))

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[VividLemon]

Looking good so far

[xvaara]

If I read this correctly we loose reactivity. This is no different from the old way of writing html with div.innerHTML = '...'. All the elements are re-rendered on each update.

If creating an app for tooltip is a problem, user should use components.

I'm against this change. How we do thing now is the same way https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/directives/v-tooltip.ts does directives that stay reactive.

But I don't really care for the directives anyway.

The way floating-vue does things is that they create one app, mount that to body and loop each tooltip inside that. We mount the div under the current element (unless teleported to body) so we can't do that.

[xvaara]

This breaks so little and the things are weird anyway in directives so it might be ok for me.

I pushed a cleanup of unneeded $__state and $__app and imports. We just pass the props to the bind function.

[james-muriithi]

If I read this correctly we loose reactivity. This is no different from the old way of writing html with div.innerHTML = '...'. All the elements are re-rendered on each update.

If creating an app for tooltip is a problem, user should use components.

I'm against this change. How we do thing now is the same way https://github.com/Akryum/floating-vue/blob/main/packages/floating-vue/src/directives/v-tooltip.ts does directives that stay reactive.

But I don't really care for the directives anyway.

The way floating-vue does things is that they create one app, mount that to body and loop each tooltip inside that. We mount the div under the current element (unless teleported to body) so we can't do that.

Hey @xvaara, I am not sure which one is the best way to do it

But, the reason I made the PR is in my workplace we use the tooltip directives and it becomes really hard to use vue dev tools (cause it has over 600 tooltip and popover apps). Vue dev tools keep crashing, DX is very bad.

[james-muriithi]

This breaks so little and the things are weird anyway in directives so it might be ok for me.

I pushed a cleanup of unneeded $__state and $__app and imports. We just pass the props to the bind function.

Thank you for this

[xvaara]

@james-muriithi you probably should be using tooltip as a component.

[VividLemon]

Regardless, i agree with the overall change of not polluting the workspace.