Dynamic popover content

Hi, I’m creating an educational widget for work, and I want it as a full screen widget in iBooks. An issue I’ve come across is getting the content of my popover (instructions for the activity on the scene) to go to full screen when my iPad is in split screen mode. Basically, I want to emaulate how the popovers in iBooks behave, but entirely in Hype. Any suggestions would be much appreciated.


Does this work as expected in regular full-screen mode? Do you have a test document so we can see how it works as is?

Are you doing this entirely within an HTML widget? Or are you trying to embed a small HTML widget next to other iBook content?

Hi Daniel,

Thanks for the response. At the moment the instruction button uses a jQuery fadeToggle function to toggle the popover. This looks just the same as iBooks in full screen. It’s when I split the iPad screen that the appearance of the popover content is different. Currently it’s all in one HTML widget, and works as i want with the exception of the popover text and its box expanding to fill the entire half or third of the iPad screen. I’m wondering if there’s code that will instruct a toggled element to appear as a normal speech bubble type popover in full screen, and then a white background with larger text on split screen mode. I can send a text doc to you in a hype zip. I’d just have to put some dummy content in as my company are super strict about confidentiality. How can I share this test doc with you?

On a side note, I must say I’m new to Hype and absolutely love the program! Was brand new to code 6 months ago, and I’m thoroughly enjoying Hype and the learning process and implementing html/javascript/css etc with Hype.

I have a feeling the solution may be through using Bootstrap. I’m gonna experiment with making the instructions popover element become full screen when the viewport goes below certain dimensions. Let’s see what happens…