Improve popover location when the trigger spans multiple lines

[damithc]

Current: When a trigger spans multiple lines, the popover appears in the middle, which might not be appropriate in some cases. Here's an example:

[ang-zeyu]

The suggested solution (white-space: nowrap;) is mentioned in the bootstrap vue documentation https://bootstrap-vue.org/docs/components/popover

The downside is that specifying this property will forcibly wrap the entire uml-user-guide onto one line, which may not be too bad in this case.

more of an issue if uml-user-guide becomes really long (or worse exceeds the width of the container, in which case it would overflow) ❗ very likely on smaller screens

Ideally we could let the element wrap as-is, and position the popover near one of the "two-sides" where it wrapped.

I gave bootstrap vue and popperjs' (now floating-ui) issue trackers a very brief scan but couldn't find any mention of this, but it should certainly be possible. In any case, something to be solved / introduced upstream since we are relying on these libraries to do the complex positioning business.

We can leave this issue open for tracking or if anyone manages to find anything else related 😃

[tlylt]

The suggested solution (white-space: nowrap;) is mentioned in the bootstrap vue documentation bootstrap-vue.org/docs/components/popover

The downside is that specifying this property will forcibly wrap the entire uml-user-guide onto one line, which may not be too bad in this case.

more of an issue if uml-user-guide becomes really long (or worse exceeds the width of the container, in which case it would overflow) ❗ very likely on smaller screens

Ideally we could let the element wrap as-is, and position the popover near one of the "two-sides" where it wrapped.

I gave bootstrap vue and popperjs' (now floating-ui) issue trackers a very brief scan but couldn't find any mention of this, but it should certainly be possible. In any case, something to be solved / introduced upstream since we are relying on these libraries to do the complex positioning business.

We can leave this issue open for tracking or if anyone manages to find anything else related 😃

I discovered pretty much the same thing and dropped an issue in bootstrap-vue's repo about a month ago...wasn't able to get any reply 😅. We could possibly wait for any update from bootstrap-vue side since in this issue they announced that they have new maintainers onboard (though priority is mainly on PR reviews and not fixing issues).

Alternatively, I was thinking we could try patching it by possibly removing the triangle at the bottom center for the multiple lines case, which I feel is the main reason why it becomes misleading when displayed in the center (pointing at a random word). The suggestion of positioning the popover near the side of the trigger could work as well.

[ang-zeyu]

Alternatively, I was thinking we could try patching it by possibly removing the triangle at the bottom center for the multiple lines case, which I feel is the main reason why it becomes misleading when displayed in the center (pointing at a random word).

Agree, this could work as an interim fix. The downside though is that we lose the arrow in "correct" cases. Wdyt @damithc @tlylt

The suggestion of positioning the popover near the side of the trigger could work as well.

One (I think hacky, inadvisable, but worth mentioning) way to do this on our side is to place 2 invisible pseudo triggers to the left and right of inline elements, then create a wrapper popover (none yet) / tooltip (none yet) / trigger(already one) component to orchestrate this. (also see https://github.com/MarkBind/markbind/issues/1615#issuecomment-1001538579) This will need quite a bit of hardcoded detection / handling of the trigger / popover / tooltip position props that I don't quite think is worth it though.

---

Alternatively, we can also add the suggested fix of white-space: nowrap to the documentation and warn of its pitfalls for now.

[damithc]

Agree, this could work as an interim fix. The downside though is that we lose the arrow in "correct" cases. Wdyt @damithc @tlylt

How about placing the popover at the end of the host text (rather than the middle) ? Would that work? The rationale is that one reads the popup after reading the host text which means the reader's eye is already at the end of the text.

[ang-zeyu]

The popover library we use (bootstrap-vue) dosen't support that right now unfortunately.

I found this a while back in floating-ui (a positioning library)'s developer site though. So it should certainly be possible but it may take quite some time to land upstream =\

[jovyntls]

The popover (and tooltip) component is currently using the floating-vue library with supports a placement attribute that would be able to fix this! Our current implementation of the popover component also allows the user to specify a placement.

We could either change the default placement, or let users change the placement themselves if they face this issue. I personally would prefer leaving our default placement as the popover at the top looks nice, and the triggers spanning multiple lines may be a less common edge case :)