CODEWITHSUNDEEP
javascriptjquerycsshighchartsbootstrap-4
user1757006
user1757006

Reputation: 775

How do you prevent a popover from overflowing viewport boundaries?

I am trying to dynamically add annotations to a Highcharts chart. If you go to my Codepen Example and click on one of the data points near a chart extreme, you will see that the popover can get obscured.

enter image description here

I was trying to use a bootstrap popover ".popover()" for this but there did not seem to be a way to position the popover at the point of a mouse click. So I took some pointers from this question.

$('#popover').css('left', (selected_point.x+15) +'px')
$('#popover').css('top',  (selected_point.y-(selected_point.h/2)-12) +'px')
$('#popover').show()
$("#annotation_text").focus()

The problem I am having is that when clicking on a data point near one of the chart edges, the popover can get cut off. How can I prevent the popover from overflowing outside of the viewport?

I tried the suggestion from KrzysztofJaniszewski. However, the popover still had some undesirable traits. For instance, it will float away from the data point on resize. If the data is scrolled it does not stay with the data point.

I decided to try something else. I have put my form inside of an annotation that is added to a point when it is clicked. When the form is saved the annotation is removed and replaced with a new annotation that contains the data from the form.

This has some cool advantages such as the positioning of the popover being handled by Highcharts so there are no boundary issues. The form also stays with its data point on resize or when scrolling data. I have updated the Codepen Example to show these effects. I forgot to fork the Codepen and so my original has been overwritten, sorry.

The only issues I am trying to overcome at this point seem to have to do with layer order or z-index of some sort. I applied some jquery to help with the focus on the form inputs but I am still having issues. For instance, try and create an annotation or note. Then try and select the text with your mouse. Instead of the mouse selecting the text, the mouse seems to be controlling the chart behind the popover and instead, it zooms the chart.

Any ideas on how to make this form be on top of the chart? It makes sense that it's not since it is really an annotation but in this case, it would be good to override just the form.

Upvotes: 3

Views: 2513

Answers (1)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3834

Here I made a copy of your CodePen

It works more or less the way you wanted.

The principle is quite simple. If the popover is about to be out of a viewport you change its position so that it is inside a viewport.

...
if (xPos > maxRight) {
    xPos = maxRight;
}
if (yPos > maxDown) {
    yPos = maxDown;
}
...

Upvotes: 2

Related Questions