Allow src attribute for popovers

[damithc]

e.g. <popover src="definintions.md#xp">Extreme programming</popover>

[jovyntls]

Hello! I'll work on this if no one is currently working on it :)

[ang-zeyu]

Note also this issue is a little tricky because our current popover / tooltip implementations assume only inline markdown (no other components / reactivity / etc. contained within) (see the options table here).

We'll likely need to:

• first move popover/toolips to bootstrap vue components which do allow for reactive content naturally
  • The solution would likely be in line with / solve [cs2103 website] Some site-nav items are not highlighted when open #1615 as such too.
• for triggers, change the approach of copy-pasting popover/tooltip content in data-mb-slot-name (see v-html in Trigger.vue) to one that handles reactivity naturally (e.g. portals?)
• finally, implement the src attribute

None of these are trivial so feel free to split it up into multiple PRs to work on!

[jovyntls]

Hi @ang-zeyu , thanks so much for pointing that out - I didn't consider the possible issues with reactivity! In that case should I refactor tooltips as well?

I'm not sure what you mean by the options table, were you referring to the props table under vue-bootstrap popover components?

[ang-zeyu]

refactor tooltips

yup, since its causing ssr issues too. Would be nice to standardise the approach as well.

I'm not sure what you mean by the options table, were you referring to the props table under vue-bootstrap popover components?

sorry for the confusion, I linked the wrong page.
https://markbind.org/userGuide/components/popups.html#popovers

[jovyntls]

Hello! I'm considering between two implementations for the src attribute, but I'm not sure which would be more appropriate: either a static approach (similar to <includes>) or a dynamic approach (similar to the src attribute in panels). Here are my considerations:

Static	Dynamic
Content will be fully loaded, which avoid positioning issues.	Starts with 'Loading...' then populates with content, may have positioning issues when placement="top". (i.e., when the popover populates with content, its height increases and may cover the trigger.) [1]
More content to load upfront, poorer performance	Better performance, may be significant for pages with many popovers

^[1]Not sure if there's a way to reposition the popover after the content has been loaded; I found this related discussion, though the given workaround no longer works since Tether has been replaced with popper.js.

[damithc]

Given popovers are not meant to contain a lot of text, go with static? What do you guys think?

[ong6]

I agree with @damithc (static), I think avoiding potential positioning issues will cause less bugs in the future as well.