Create a popover

Popovers are usually small components which will appear near a clicked element, button or icon. Popovers can contain additional information about an element or other object, and optionally provide buttons for any further actions, like edit or remove. As an alternative to creating a custom popover yourself, the platform offers some complete, ready-to-use popovers.

To create and use a popover in an application, take these steps:Create a popover component.

A popover is just another React component. This component should adhere to the same rules as any other component created with the Fonto Design System. This example popover will contain some plain text and an FxOperationButton.

The example makes use of the Popover, PopoverBody and PopoverFooter components to create the popover itself and to structure its contents. Additionally, PopoverHeader and PopoverAnchor are available besides the earlier named components.

import PropTypes from 'prop-types';
import React, { Component } from 'react';

import FxOperationButton from 'fontoxml-fx/src/FxOperationButton.jsx';

import { Popover, PopoverBody, PopoverFooter, Text } from 'fds/components';

class ExamplePopover extends Component {
	static propTypes = {
		data: PropTypes.shape({
			contextNodeId: PropTypes.string.isRequired
		}).isRequired,
		togglePopover: PropTypes.func.isRequired
	};

	render() {
		return (
			<Popover maxWidth="300px" minWidth="220px">
				<PopoverBody>
					<Text>Some text content for the example popover.</Text>
				</PopoverBody>

				<PopoverFooter>
					<FxOperationButton
						label="Do nothing"
						onClick={this.props.togglePopover}
						operationData={{}}
						operationName="do-nothing"
					/>
				</PopoverFooter>
			</Popover>
		);
	}
}

export default ExamplePopover;

Register the popover component

Before a popover can be used anywhere in FontoXML, it needs to be registered by using the UiManager#registerReactComponent method.

This function should be called in the install.js file of the package containing the popover component:

import uiManager from 'fontoxml-modular-ui/src/uiManager.js';
import ExamplePopover from './ui/ExamplePopover.jsx';

export default function install() {
	uiManager.registerReactComponent('ExamplePopover', ExamplePopover);
}

Use the popover component

A popover can be used on any family by providing a popoverComponentName and optionally popoverData in the CvkOptions of any family. The popover will show when clicking the element configured with this visualization.

configureAsInlineLink(sxModule, 'self::xref', 'link', 'href', {
	popoverComponentName: 'ExamplePopover'
});

Popovers in read-only context

Popovers will be rendered everywhere, including read-only contexts. These read-only contexts exist are previews and document history. Obviously, read-only contexts do not allow the user to edit the underlying XML document. This means that some popovers do not serve any purpose in read-only contexts or may need to only render additional information related to one or more elements.

Completely disable popover in a read-only context

By default, popovers are rendered in all contexts. This behavior can be changed per popover by setting the hidePopoverInReadOnlyViews static property on a popover component.

class MyPopover extends Component {
	static hidePopoverInReadOnlyViews = true;

	// Other popover content
}

For a function-style component the property can be set on the function itself:

function MyPopover (props) {
	// ...
}

MyPopover.hidePopoverInReadOnlyViews = true;

Conditionally render parts of a popover in a read-only context

When a popover does provide useful information regarding an element, it is recommended to also render it in a read-only context. Popovers may, however, contain buttons which execute operation which edit the underlying XML document. These buttons should not be available to the user in a read-only context. To not render these buttons (or any other component) in a read-only context, a flag called isReadOnly is passed to the popover as property on the popover's data prop.Refer to the example below on how to use the isReadOnly prop.

Note that popovers could be opened from a read-only preview of an otherwise editable document (which is also loaded in the editor). In such cases, operation-based components such as FxOperation would be enabled, and may need to be disabled manually based on this prop to prevent editing the document from a read-only view.


import PropTypes from 'prop-types';
import React, { Component } from 'react';

import FxOperationButton from 'fontoxml-fx/src/FxOperationButton.jsx';

import { Popover, PopoverBody, PopoverFooter, Text } from 'fds/components';

class ExamplePopover extends Component {
    static propTypes = {
        data: PropTypes.shape({
            contextNodeId: PropTypes.string.isRequired,
            isReadOnly: PropTypes.bool
        }).isRequired,
        togglePopover: PropTypes.func.isRequired
    };

    render() {
        return (
            <Popover maxWidth="300px" minWidth="220px">
                <PopoverBody>
                    <Text>Some text content for the example popover.</Text>
                </PopoverBody>

                {this.props.data.isReadOnly && (
                    <PopoverFooter>
                        <FxOperationButton
                            label="Do nothing"
                            onClick={this.props.togglePopover}
                            operationData={{}}
                            operationName="do-nothing"
                        />
                    </PopoverFooter>
                )}
            </Popover>
        );
    }
}

export default ExamplePopover;


Available popovers

Apart from creating a custom popover, the platform offers multiple complete popovers for usage with reference-like elements.