Inserting Topic Popups

A topic popup is a text hyperlink that opens a topic or external file (such as a website) in a popup box.

How to Insert a Topic Popup

1. Open the content file.
2. In the XML Editor, highlight the text that you want to use as the link (or "hotspot") for the topic popup.

3. Select Insert > Hyperlink > Topic Popup.

   The Insert Topic Popup dialog opens. The Target Frame field at the bottom of the dialog already has Popup Window selected.

4. From the Link to drop-down field, select a way to identify the topic, bookmark, or file to which you want to link. Based on the option you choose, the section below gives you a list of selections or additional fields to complete.

   File in Project 

   This option lets you search for a file within your project. After you select this option, use the area below to navigate to the file that you want to link to and select it. By using the buttons in the local toolbar, you can view all files in a list, view files in their folder structure, and use other options.

   	Shows all of the files in the project in a list below. Click the button again to switch to a folder tree view. You can click the File, Type, or Path column headers to sort the list alphabetically by that column data.
   	Shows or hides the folders that the files are stored in.
   	Shows or hides the files. If you click this button when the Show Folders button is selected, the area splits into two. The folder is shown on the left side, and the files and subfolders within it are shown on the right.
   	If the Show Files button is the only one selected, you can click this button to move up one folder level.
   	Lets you filter the kinds of files shown below. Depending on the task you are performing, this field may already be populated with the most appropriate file type(s).

   You can also click to display and select any bookmark or a location using a particular style (including classes and IDs). If necessary, a bookmark will be created at that location if one does not exist. If you want to clear a bookmark in the link, select it and click the button at the bottom of the dialog. See Inserting Bookmarks.

   You can also select if you have selected a PDF file. See Creating Named Destinations.

   External File

   This option lets you search for a file (e.g., HTM, HTML, XML, PDF, Microsoft Office files) outside your project. This is especially useful if you want to link from one topic to another in separate project outputs, such as CHM files. After you select this option, enter the path to the file in the field next to the External File button.

   You can also click to display and select any bookmarks within the destination file, or if you have selected a PDF file. See Inserting Bookmarks and Creating Named Destinations.

   For more information see Inserting Links to External Files—HTML, PDF, Microsoft Office.

   Note Because the link usually needs to be relative, based on the final locations of your output files, it is preferable to enter the text directly into the field, rather than clicking the External File button.

   Website

   This option lets you enter the path to an external file, such as the URL for a website. After you click this option, simply type the path in the field next to the Website field (e.g., http://www.acme.com).

   If you want to insert a variable in a field, you can click . The variable will appear as syntax in the field, but in the output the variable definition will be shown.

   You can create links to specific topics in HTML5, WebHelp, or WebHelp Plus output. This includes the ability to incorporate search strings and skin references (for some outputs). See Creating Links to HTML5 Topics and Creating Links to WebHelp and WebHelp Plus Topics.

   HTML Help File

   This option lets you search for a topic within an HTML Help (CHM) file that you have added to your project. After you select this option, click the External File button. In the Link to HTML Help dialog, you can do one of the following.

   • Select Project Files and then use the area below to navigate to the file that you want to link to and select it. By using the buttons in the local toolbar, you can view all files in a list, view files in their folder structure, and use other options.

     	Shows or hides the folders that the files are stored in.
     	Shows or hides the files. If you click this button when the Show Folders button is selected, the area splits into two. The folder is shown on the left side, and the files and subfolders within it are shown on the right.

   • Select Import Existing. In the dialog that opens, find and double-click the CHM file. Then from the drop-down—which displays "(root folder)" by default, you can select a specific content folder in your project to place the CHM file.

   After the CHM file is selected, in the Topic field click . In the dialog that opens, find and double-click the topic that you want to link to.

   When you are finished, click OK in the Link to HTML Help dialog.

5. (Optional) The Link Text field displays the text that you highlighted in the topic, which will be used as the hyperlink. Leave the text as it is, unless you decide you would like to change it. If you want to change the link text, type the new text in the field. It will replace the previous text in the topic.
6. (Optional) In the Screen Tip field, you can type a phrase that will appear when the end user hovers over the hyperlink in the output.
7. (Optional) Next to the Style Class or Style ID field click . This opens the Select Class dialog, which lets you apply a CSS style or a style ID to a link. Generic classes and IDs are also available for selection in this dialog. You can change the appearance of the link in the Stylesheet Editor. After you select a style class in the dialog, click OK. If you selected a class, it appears in the Style Class field, and if you selected an ID, it appears in the Style ID field. (If you do not specify a style class, Flare uses the parent "a.Popup" style class.)
8. In the Target Frame field, leave Popup Window as the selection.
9. Click OK. The hyperlink for the topic popup is added to the topic. You can change the appearance of the link by modifying the a.Popup style in the Stylesheet Editor. This includes the ability to change the size of the popup. See Editing Topic Popups and Customizing the Size of Topic Popups.
10. Click to save your work.