Fix a Popover problem in my Vue.js/Bootstrap app

Job ID: 37313624

Budget: $10 – $30 USD

I am looking for a Vue.js (3) and Bootstrap (5) expert to fix a popover problem in my app.

I have a small example website: See http://ec2-35-156-17-245.eu-central-1.compute.amazonaws.com/

Move the mouse over the '+' at the top.
A popover will appear.
If you leave the '+' the popover hides.
That is the correct behaviour.

Now the error:
Move the mouse over the '+' at the top again. A popover will appear.
Now click at the '+'.
A new page will be shown and the popover is still shown.
Now move the mouse. The popover will not hide! This is the error! The popover should hide now!
If I click somewhere the popover will hide.

The '#' has the same problem...
(In reality there are much more clickable items at the top with those popovers...)

I think it has to do with the input focus (or a timing problem), but I am not able to solve this.
'Sometimes', when I not just show the trivial text "Title2", but do longer computations for showing the page the popover seems to be 'frozen'.
In that situation if I click somewhere the popover will never hide!

Must be a trivial fix for someone with some knowledge in that area....

As I am an idiot I need the working vue-integration code and not just a tip like 'yep it is the focus and you just need to follow the hint at stockoverflow'.)
Related categories: JavaScript Bootstrap Vue.js Vue.js Framework