Popover PRO

Element type: Dictionary

You can setup a popover window to appear when the user clicks the button. Here is the popover configuration.

note

The popover component has to be used within a Button component.

Keys

Name	Type	Possible values	Required
Text	String		Required if no FilePath is provided
FilePath	String	-	Required if no Text is provided
Edge	String	Left, Top, Right, Bottom	Required
Font	Dictionary (Font)
Size	Dictionary (Size)	-

Detail

Text

Type: String
Explanation: The markdown text to display. The markdown formatting used is CommonMark. Required if no FilePath is provided.

FilePath

Type: String
Explanation: If specified, Octory will display the content of the markdown file rather than the Text key. The markdown formatting used is CommonMark. Required if no Text is provided.

Edge Required

Type: String
Possible values: Left, Top, Right, Bottom
Explanation: The preferred edge where the popover arrow should point to.

Font

Type: Dictionary (Font)
Explanation: The Font used to display the text.

note

For the font Name key, you should only specify the name and not the postscript name. For example just write AvenirNext and not AvenirNext-Regular.

Size

Type: Dictionary (Size)
Explanation: The size of the popover view. Default is 300x400.

Example

Button with an Info style (ℹ️) which displays a popover when clicked. The markdown popover has a header and a simple text line. It uses the Avenir font. The color of the info image is set as the Secondary color defined in the ColorStyles section.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<!-- ... -->
	<key>Slides</key>
	<array>
		<dict>
			<key>Containers</key>
			<array>
				<dict>
					<key>Components</key>
					<array>
						<dict>
							<key>Type</key>
							   <string>Button</string>
								<key>Style</key>
								<string>Info</string>
								<key>Color</key>
								<dict>
									<key>Style</key>
									<string>Secondary</string>
								</dict>
								<key>Alignment</key>
								<string>Right</string>
								<key>Popover</key>
								<dict>
									<key>Text</key>
									<string># Informative text
									This is informative text</string>
									<key>Edge</key>
									<string>Bottom</string>
									<key>Font</key>
									<dict>
										<key>Name</key>
										<string>Avenir</string>
									</dict>
								</dict>
						</dict>
					</array>
				</dict>
			</array>
		</dict>
	</array>
	<!-- ... -->
</dict>
</plist>