You can't using only OpenLayers 3 (I would be happy to learn how if not).
The image you get in the demo is the one you get by exporting the map Canvas element in the DOM. Your pop-up is part of the DOM so outside the Canvas hence the exported image. Providing HTML element in the Canvas does not seem possible (https://stackoverflow.com/questions/12652769/rendering-html-elements-to-canvas)
The only way IMO to get everything is to use a server side script and rely on a headless browser like Phantom JS to take a screenshot (see a demo).
The issue you will get in all case is that you will have to change map width and height because your screen resolution is around 96dpi whereas for print, it's recommended to get 300dpi or more.
You can maybe look also on the MapFish Print component but I didn't try it since some time: I don't know nowadays it exact features.
An alternative at functional level could be to change your way of doing: just retrieve the image with the selected feature and provide this image plus the content in a separate box. It would be more like a report than a screenshot export.