Allow for reactivity in popover and tooltip contents

[jovyntls]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Relates to #59

Overview of changes:
Allows for reactivity in popover/tooltip contents by:

• Using the vue-bootstrap component instead of directives to implement popovers and tooltips.
• Using portals for Triggers

Testing instructions:

### Popovers

<popover header="header" content="**lorem ipsum** dolor sit amet <panel header='can be clicked'>panel contents</panel>">
hover popover
</popover>

<popover header="Header" content="Lorem ipsum dolor sit amet" trigger="click">
  <button class="btn btn-secondary">Click popover button</button>
</popover>

<br>

This is a <trigger for="pop:trigger_id" trigger="focus">focus trigger</trigger>.
This is a <trigger for="pop:trigger_id">hover trigger</trigger>.
<popover id="pop:trigger_id" content="This popover is triggered by a trigger. <panel header='can be opened'>Lorem ipsum</panel>"></popover>
<br>
This is a <trigger for="pop:trigger_id" trigger="click">click trigger</trigger>.

### Modal

More about <trigger for="modal:loremipsum" trigger="click">trigger</trigger>.
This is the same <trigger for="modal:loremipsum">trigger</trigger> as last one.
<modal header="**Modal header** :rocket:" id="modal:loremipsum">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
  magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</modal>

### Tooltips

<tooltip content="**Lorem ipsum** *dolor sit amet* <trigger for='modal:loremipsum'>Modal hover trigger</trigger>." placement="bottom" trigger="click">
  <button class="btn btn-secondary">Tooltip on bottom</button>
</tooltip>
<br />
This is a <trigger for="tt:trigger_id">hover trigger</trigger>.
<tooltip id="tt:trigger_id" content="**Lorem ipsum** *dolor sit amet* <trigger for='modal:loremipsum' trigger='click'>Modal click trigger</trigger>"></tooltip>
<br>
This is a <trigger for="tt:trigger_id">click trigger</trigger> 

Proposed commit message: (wrap lines at 72 characters)

Allow reactivity in popovers and tooltips

Currently, popovers and tooltips are implemented using bootstrap-vue 
directives. 

Such an implementation is not reactive which limits the content that 
can be used in a popover/tooltip. Reactivity is important for future 
enhancements like supporting the src attribute (#59). Furthermore, it 
is incompatible with SSR, resulting in hydration problems that have 
arisen in #1615.

Using Vue components for tooltips and popovers, and Portals for 
triggers, allows us to avoid the issues with reactivity and SSR. 

Let's use components instead of bootstrap-vue directives to implement 
popovers and tooltips. This gives better support of reactivity while 
avoiding SSR issues.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No unrelated changes

[ang-zeyu]

Thanks for the PR! I think this is in the right direction.

Wonder if we should account for reactivity in popover content inside <trigger>s as well in this PR. (maybe even tooltips), since it also changes how content is transfered over to <popover>s themselves. (e.g. if you are portalling the content)

[jovyntls]

Hi @ang-zeyu , thanks for the suggestion, I think that makes sense especially since portal-ling the content over would remove the need for the data-mb-slot-name attributes in Popover.vue. I'll make the changes to Triggers and Tooltips too!

[jonahtanjz]

Nice work @jovyntls 👍 Implementation wise looks good.

Found 2 issues while trying it out:

On the documentation site, the popovers and tooltips in the codeAndOutput seems to be bugged. Can refer to the PR preview.

All the content of the tooltips and popovers are displayed by the side. Maybe related to this part where the target became [object Object]?

The other issue that I noticed is that the content in popovers now "flashes" first before disappearing when the page is loaded initially. This can be quite obvious when there are a few popovers used on the same page and the content contains items that take up quite a bit of space such as panels.

Landing.Page.-.Google.Chrome.2022-02-04.17-19-06.mp4

I haven't identified what is causing this issue yet.

[jonahtanjz]

Also noticed when the popover includes content such as another page, the popover can overflow.

<popover header="header" content="<include src='../index.md' />">
hover popover
</popover>

127.0.0.1_8080_contents_topic3a.html.-.Google.Chrome.2022-02-04.17-37-45.mp4

Perhaps we can introduce overflow scroll on the popover itself?

[jovyntls]

Thank you for testing @jonahtanjz ! I can't seem to replicate the first 2 issues locally (even with throttling), so currently it seems to be an issue with the deployed site O.o

Is it okay for me to "spam" commits for the PR preview to test this out? Or should I open a new PR for testing?

[jonahtanjz]

I can't seem to replicate the first 2 issues locally (even with throttling), so currently it seems to be an issue with the deployed site O.o

The documentation site on my local setup is fine as well. The "flashes" occurred on my local setup. Will try to use another device to see if this is happening as well.

Is it okay for me to "spam" commits for the PR preview to test this out? Or should I open a new PR for testing?

Should be fine :)

[jovyntls]

I've fixed the issue with the buggy popovers and tooltips in the codeAndOutput — the default slot had to be named #default, though I'm not sure why this is so. (Importing vue-bootstrap could fix the issue as well)

Will look into replicating the flashes, and the overflowing behaviour!

[jonahtanjz]

Will look into replicating the flashes, and the overflowing behaviour!

@jovyntls Tried it out on another device and it seems that the flashes are gone. Might have been an isolated issue. Can ignore for now :) The overflowing issue can be replicated.

[ang-zeyu]

There are quite a few hydration errors (in the console) as well locally which may be causing the discepancies (netlify previews are a production build with vue ssr assertions disabled).

[ang-zeyu]

these are local to the scope of the template being compiled (i.e. Popover.vue) (try testing a trigger with a popover with both header and content)

[jovyntls]

Thank you for the catch, I've fixed this as well as the hydration errors and checked the console (locally and on the deploy preview) for hydration warnings. Do let me know if I've missed out any other concerns!

[ang-zeyu]

Nice work!
I think this fixes #1615 as well 🎉.

Just a few more touchups:

• data-mb-slot-name selector in markbind.css can probably be removed
• the '[data-mb-component-type] [data-mb-slot-name]' selectors in algolia.js too (ssr should take care of this now)

[jonahtanjz]

Nice work @jovyntls. The overflow issue seems to be fixed 👍

Just one suggestion, other than that the rest looks good to me.

Edit: Might also want to try closing and reopening this PR to refresh the CI workflow. That seems to remove the appveyor check in the other PR.

[jovyntls]

Closing to refresh the CI workflow; will reopen

[jonahtanjz]

Thanks @jovyntls!

Can try to run npm run lintfix to resolve the linting issue :)

[jonahtanjz]

LGTM 👍

Let's wait for @ang-zeyu to approve as well in case he has anything else to add :)

[ang-zeyu]

No more comments on the implementation, Lgtm as well! 👍

Allow reactivity in popovers and tooltips

Since this change has quite a bit of context, let's try to also summarise in your commit message body the various reasons, and how this pr achieves it:

• Solves part of [cs2103 website] Some site-nav items are not highlighted when open #1615
• Reactivity (in so doing also enabling the popover src issue)

(a format is available in the pr template's link)