Develop Reference

Bootstrap 4 - how does automatic Popover re-positioning work?

I like letting my popovers stay open until the user explicitly closes them.
One of the nice features of the new Bootstrap Popovers is that they automatically re-position when the user changes device orientation, scroll or resize the window. They even follow along as the content re-flows - e.g. as a paragraph is wrapped and the element grows or shrinks in length while you resize the window - all the popovers on the screen will keep re-positioning to be near their target.
How does the Popover plugin know that the page is being re-flowed so that it triggers the popover re-positioning?
My webapp is dynamic, user actions cause elements to grow/shrink, toggle on/off, etc. At the moment, when I change the page via code, the popovers get left behind - they don't get re-positioned near their target.
One workaround to this, as a user, is to just scroll the screen a little bit and Bootstrap will re-position the popovers and everything looks right again.
I'm trying to figure out a way to re-position the popovers when I change the page layout via code.
Hence the question: how does Popover re-positioning work (and can I hook into it so I can trigger it automatically).
EDIT: I've just noticed that the popovers will re-position just fine if the "dynamic" content happens to be the Bootstrap navbar collapsing/expanding because of a tap on the navbar-toggler.

There's two parts to this question.
How does popper.js know when to update the popovers?
How does the popover change position?
Answering these backwards:
2: How does the popover change position?
You need the update method of the popover:
$('#element').popover('update')
I've done a quick demo here:
https://jsfiddle.net/pktyptyp/
First, click the green button to open the popover. Then use button 2 to move the popover toggle. Now the toggle and the popover no longer line up. So finally use button 3 to reposition the popover by its toggle.
The docs for this are tucked under the popover methods section here:
http://getbootstrap.com/docs/4.0/components/popovers/#methods
If you wanted to update every popover on your page and not just a specific one, then you could do:
$('[data-toggle="popover"]').popover('update')
How does popper.js know when to update the popovers?
Popper will be subscribing to events like window.scroll and window.resize. You can see this in a bit of their source code:
https://github.com/FezVrasta/popper.js/blob/master/packages/popper/src/utils/setupEventListeners.js
The update method won't be called immediately in that event handler - there'll be something that gets passed back to the Boostrap widget, which in turn will call the popover update method.
I am fairly sure Popper & the Popover widget will not be looking at the position of the individual toggles. This is partly because unless the toggles are positioned, their left/top properties will always be 'auto' so it will be hard to work out if they are moving. Or to put it another way, when the window scrolls, the toggle has not moved within the document, but the popover (which is absolutely positioned) needs updating. So this is a bit of a broad brush - they are looking out for the entire window changing, assuming the popovers are out of position, then triggering more events to update them.
If anyone knows more about this, though, please tell me in the comments!
You have a bit of an advantage in that you know when you change your UI, so you can call 'update' on all the Popovers at will. This to me seems like the ideal approach.
However, if your toggles are absolutely positioned, you could do this a bit more automatically by watching their position. Here's an example with an absolutely-positioned toggle and in this example, the popover moves automatically without the third button click.
https://jsfiddle.net/pktyptyp/1/

I don't know how the logic work behind that because on Bootstrap we use Popper.js to handle that so if you want to understand the logic behind that you can browser this : https://github.com/FezVrasta/popper.js

Highcharts svg element "highcharts-series-group" not resizing

I am working with charts that must resize dynamically. On calling the chart.setSize(containerWidth, containerHeight, boolean) method everything seems to resize appropriately except the svg element "highcharts-series-group". This element seems to remain fixed at the size that it had when the chart was created. The end result is that the parts of the graph that are outside of its "view box" are hidden.
Below are two images showing demonstrating this:
1: I minimized the screen for the initial creation of the chart
2: In the second image I have fully expended the browser further and applied the chart.resize() method which seems to work except as the image shows the "highcharts-series-group" svg element of the graph has not changed with this resulting in most of the group being hidden as it resizes beyond the "highcharts-series-group" boundaries.
Am I missing something?
EXTRA INFO:
The only work around I have managed right now for this is to destroy the chart and to recreate it whenever the window resize event is triggered.
This would be all good except this gives a bad user experience as the chart "blinks" when it is destroyed and then created.

The issue was the version. My organization was using version 2.0.2. Just updated to the latest (5.0.5) and the issue vanishes.

Dygraph not shown on collapsed jQuery mobile collapsible widget

I have multiple dygraphs plots, which I would like to group in a collapsible jQuery widget, so that one could only show some groups of graphs. Sadly, this only works if the collapsible div is expanded at the start, if I start collapsed, the graph will not be drawn after expanding.
Although not a real solution, I could start with all all elements expanded. However, if the collapses some graphs and switches pages in between, they same problem occurs.
Here is a jsFiddle which shows the problem - set data-collapsed="false" and the graph will be drawn.

You might try calling g.resize() or g.updateOptions() on all the charts when the widget expands. These should be no-ops, but their effect is to force dygraphs to recalculate the size of its container <div>, which has changed due to the expanding widget.
To my knowledge, there's no way to tell from JavaScript when a DOM Element becomes visible or is resized in ways other than window resizes. This affects other JS libraries as well.

ie/chrome inspector causes redraw

I have some charts/graphs that I'm using the google visualization api to display. Initially i have set the display of their container to none. Once the user clicks a button I use javascript to make the container's display property to block. I'm seeing two strange behaviors when I do this
When I do it this way, the charts display improperly( they are smaller in size which causes some of the text labels to run over each other or off the chart). However, if I don't turn the display property to none initially then they work just fine.
When the charts are messed up and I press F12 (either on ie or chrome) to open the inspector, these charts magically redraw themselves to the proper size again.
Is there a way to either fix the 1st issue or somehow use javascript to emulate the redraw that is happening when I open the inspectors?

You can try following options:
1) Change your container div's display property to '' (empty parenthesis) instead of block
OR
2) After you change the display property to block, force the window resize event.
You could use the jQuery resize() method, like this:
$(window).resize();

Drawing charts inside hidden divs causes the Visualization API's dimension detection algorithms to break, which is why your charts are messed up. The fix is to draw the charts while the divs are visible, then hide the divs after the charts have drawn. You can use "ready" event handlers for your charts to accomplish this:
google.visualization.events.addListener(chart, 'ready', function () {
document.querySelector('#myChartDiv').style.display = 'none';
});

I tried to resize the window using scripts, but I found that some browsers did not support this. In the end, I ended up removing the container div from the DOM using jQuery and then appending it again when I wanted to display it. This preserved the correct sizes of the graphs
$tab3 = $('#tab3').remove();
then when I wanted to display it (the div of class panes is the original parent to the div of id tab3)
$('.panes').append($tab3);

Why google charts are without right click menu?

Is there a reason why there isn't a default browser context menu on google charts? And am I missing an option that could allow one?

The link that you have posted is of google's chart page i.e. https://developers.google.com/chart/
On this page the chart is rendered as SVG inside a div with the id="chart_div" which acts as chart area wrapper / container. Inside this div there are two more nested divs. The last nested div has its contextmenu event disabled thru javascript.
In order to test this, open the source in developer tools and add oncontextmenu="alert('hello');" to this div and then check try right-click.
Now for your question: Why? This is perhaps because Google Charts are interactive charts and lot of informational popups are dependent on hover and click. They must have thought to keep the chart area clean without any distracting context menus on it. Context menu might not have any useful purpose on the chart itself. However, this is only my speculation.