PopUp Text

Overview

Widgets PopUp Text are designed to allow small blocks of text or relevant images to be popped-up next to a relevant content link. The pop-up panels are authored containers that are hidden until required. You can include any content into a pop-up and style it appropriately for the content.

Popups can be launched from text, headings, titles and if appropriate from image icons.

PopUp Text operates independently from the ePub 3 footnote "Aside method" as that is too limited and not completely defined. If an ePub3 reading system supports Javascript Widgets PopUp Text will work reliably. It will also work in Javascript supported non-ePub3 packages and presentation environments.

PopUp Text works in both fixed layout and reflowable ePub3 books subject to the previous conditions.

Sample PopUp Text

You can click on the word Text in the title or Click here to see PopUp Text in action.

Production and Design

Inserting PopUp Text in IGP:Digital Publisher

1. To insert Widgets PopUp Text into an IGP:Writer document.
2. In the editing panel, place your cursor at the required insertion point in an empty paragraph.
3. From the Content Blocks accordion select> W01: Widgets
4. Double click on "05 PopUp Text" button.
5. The PopUp Text content block will be inserted into the text with placeholder text.
6. You can now directly write, copy/paste or assemble your content inside the PopUp Text content block.

By default the PopUp Text block will be hidden in the output format. This block is invoked and displayed by internal ID references. It can be placed and called from anywhere and from multiple places within the section.

Creating a PopUp Text Call Reference

1. To create a Panel PopUp call reference select the text/content from where you want any particular popup text block to be called or opened.
2. From the Content Block accordions, INLINE styles, click on the "Popup Reference" selector.
3. The selected text will have the PopUp Reference tag applied and will turn blue.
4. The ID-Reference must point to the ID of the PopUp Text. The PopUp Text ID must be unique in the section.
5. Get the ID of the Panel PopUp Text from the Content Block Tool (click on ID and copy the ID).
6. Click on the Popup Reference text. It will open a dialog so you can enter the PopUp Text block reference ID.
7. Paste the correct PopUp Text block ID you just copied and click on OK button.
8. Save the Writer document and view the section in the Reader panel.
9. When you click on the PopUp Text reference text the PopUp Text block will open near the Reference and over the other content on the page.

 Tagging Pattern and CSS

PopUp Panel Tagging Pattern

<!-- POPUP PANEL -->
<div class="widgets-rw popup-text-rw">
<p>Your popup text content goes here.</p>
</div>
<!-- POPUP PANEL REFERENCE LINK -->
<span class="ref-popup-rw" data-pp-target="pt1">Hello</span>

 Note that Widget references use the HTML5 data- attribute.

PopUp Panel Default CSS

 /* Popup ========================= */
div.popup-text-rw {
    position: relative;
    width: 300px;
    min-height: auto;
    max-height: 500px;
    background-color: rgb(255, 255, 220);
    box-shadow: 5px 5px 10px black;
    border-radius: 10px;
    padding: 10px;
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
    font-style: normal;
    color: rgb(0, 0, 0);
    display: none;
    z-index: 9999;
    }

/*DEFAULT POPUP PANEL REFERENCE CSS =============== */
.ref-popup-rw {
    color: blue;
    text-decoration: none;
    cursor: pointer;
    }
.ref-panel-popup-rw:hover {
    text-decoration: underline;
    }

 The Popup text is stored between the dotted lines. This allows popup text to be sourced from a glossary for example.

=====================

 =====================