Trip blocks cut by the viewport

[henev]

Hey,

Sometimes when I place an item that needs to be highlighted in the corner, the trip block for it is going outside the window viewport. Any change this could be fixed?

[EragonJ]

@henev

i think this problem is quite obvious since there is no much room for it. In this scenario, what is the best solution for it ? any discussion would be appreciated.

This needs to change the algorithm itself for this edge case, should we change the position ? if so, to where ? ... etc questions are all included.

[henev]

Well I think bootstrap popovers have a good positioning. I think the box itself should go down and the pointer to remain on the same position. At least that's how bootstrap popovers work I think.

And it will be nice to have an option to change the position if no room is available. For instance in that case if I put it on east there is no possible way to fit there and it automatically move it to west for example.

From Bootstrap documentation:

placement: How to position the popover - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the popover. For example, if placement is "auto left", the popover will display to the left when possible, otherwise it will display right.

viewport: Keeps the popover within the bounds of this element. Example: viewport: '#viewport' or { "selector": "#viewport", "padding": 0 }

[EragonJ]

@henev

ok interesting, i'll go check what's going on there in bootstrap popover. If possible, feel free to update Trip.js algorithm if you want, big thanks.

[bmerigan]

We also experience this issue (3.0.0) When adding a trip-block to the menu icon which is in the top-left corner of our webpage, the trip-block is centered under the icon, which means half of it is off the side of the screen.

UPDATE: My testing so far shows this already works correctly for the right-side of the screen. Only the left side is a problem.

I think the process would be similar to: calculate the position for cssHorizontal, check if it exceeds the screen edge (cssHorizontal < 0), if required set cssHorizontal to 0.

Also, adjusting the position of the arrow would be beneficial, but difficult to do neatly. It's currently a pseudo-element with horizontal position set by width: 50% Changing it to $sel.offset().left+(selWidth/2) when required looks pretty good to me.