Join Mike Rankin for an in-depth discussion in this video Adding a text pop-up, part of iBooks Author for Teachers: Creating a Lab Manual.
Earlier in this project, we used the pop-over widget to add interactivity to the Safety icons in our lab. In this movie, we'll again use the pop-over widgets, but this time we'll skip the image and create a transparent area so students can tap on text to see the content of the pop-over. Here in the Procedure section, I have steps that students will follow to complete the lab. Most of the steps are really straightforward and require no further explanation, but that's not the case here in step 3. It says, "Slowly place the cover slip at an angle to cover the soil-water mixture." There are two things that would make this step clearer.
First, I'd like to explain why I want the students to place the cover slip at an angle and second, I'd like to show them how to do it. And I'd like to have this information available by tapping the text in this step, specifically these words "at an angle." Now you could use a Glossary item to create a pop up, but that didn't feel right here since I just want to make the words "at an angle" what the student taps on, and those don't really belong in a glossary. So instead, what I'm going to do is use a pop-over widget, with a little twist. First I'm going to apply some formatting to the words "at an angle" to make them look like a hyperlink.
I'll select them, go to Character Styles, and choose Hyperlink. Now the text is red and underlined, but it's not really a hyperlink. It just looks like one. I'll click to deselect the text and then add the pop-over widget from the Widgets menu. Then I'll add the text that I want to appear in the pop-up. I saved it in a plain text file that you can find in the Exercise Files. I'll select it, copy it, and paste it into the widget. I'll resize. Next I want to add an image to show the proper technique.
Again, I'll switch to the Finder and go to my Exercise Files. And I have a file called angle.jpg, which is a photo of the cover slip being placed properly. I'll drag and drop that into the widget and then adjust, just like that. To make the pop-over stand out a little bit more from the rest of the page, I'll change the fill color using the Graphic Inspector. I'll pick a light-blue color. Next, I'll click on the image placeholder to select it. Now, I really don't want an image here.
I want it to look like you're tapping on the words "at an angle" to open the pop-over. So I need to completely hide this object and make it invisible. First, I'll go to the Wrap Inspector and deselect Object causes wrap. That way it won't any text out of the way. Then I'll go to the Metrics Inspector and deselect Constrain proportions. That way I can resize it and change the shape so it exactly fits over the text. Then I'll go back to the Graphic Inspector and reduce the Opacity to 0.
I'll drag to move it in place, right over the words "at an angle." Even though I can't see this anymore, it's still functional. Let's preview the lab and try it out. I'll click Preview and then on the iPad, I'll tap the text. And there you go: a text pop-over. Sometimes you have to be a little creative to accomplish the things you want with any application. iBooks Author doesn't allow you to use text as a trigger to open a pop-over, but in this movie we saw a workaround, by formatting text to look like a hyperlink and creating and transparent object overlaid on top of that text to open the pop-over.