How to add popups and panels to your visualization
Please note popups and panels are not yet available across all Flourish templates. Click here to get an overview of which templates support popups and panels.
In this article
- 1
-
To start customizing your popup/panel setup, head to the "Popups & Panels" settings in the Projection map template or the "Popups" settings in the Radar template. You can choose between four different options:
- None: No popups and panels will display
- Popup: Popups will display when hovering over data points/regions
- Panel: Panels will display when clicking on data point/regions
- Both: Popups will display on hover and panels will display on click. When using this option, the popup will automatically display "Click to see more" unless specified differently.
- 2
- Customizing the style of your popups
- If you've selected to display only popups or popups and panels and you'd like to customize the way your popups display, you can do this by toggling the "Show popup styles" button on.
-
- You are able to customize the following:
-
- Width: The width of your popup in rems. Leave blank to let the width adjust to the size of the popups.
- Text size: The text size in your popups in rems
- Text color: The color of your text
- Alignment: The alignment of your popup content. You can select from left, center and right-aligned. Please note that if you have selected the table layout from the "List type" settings (see below), the alignment won't apply to the items in your table.
- Fill color: The background/fill color of your popups
- Fill opacity: The opacity of your background/fill color. Select 0.8 for an 80% opaque background.
- Padding: The padding around your popup content in rems
- Radius: The corner radius of your popups.
- Header style: You can choose between Header block and Header inline. "Header block" lets you set different background and text colors for the header (eg. the column you have bound to "Name" in the column selection), while "Header inline" will color your header text and background the same as the rest of the popup.
- List type: In the list type settings, you'll be able to choose between a table and a list layout. The table layout option will display your column headers and items in a table, whereas the list layout will display them with a colon (:) separator by default. If you have selected the list layout, you will be able to change the separator in the "List separator" dropdown
- Label weight: Whether you would like your labels (column headers) to be boldened or not
- Pointer: Whether you would like to have a pointer to display with your popups or not
- 3
- Customizing the style of your panels
- Similar to your popups, you can customize everything from coloring to spacing in your panels. To tweak the settings, you can toggle the "Show panel styles" button. From here, you're able to customize the following:
-
- Width (%): The width of your panel in relation to the size of your visualization
- Height (%): The height of your panel in relation to the height of your visualization
- Max width (px):
- Text size: The text size in your panel content in rems
- Text color: The color of your text
- Alignment: The alignment of your panel content. You can select from left, center and right-aligned. Please note that if you have selected the table layout from the "List type" settings (see below), the alignment won't apply to the items in your table.
- List type: In the list type settings, you'll be able to choose between a table and a list layout. The table layout option will display your column headers and items in a table, whereas the list layout will display them with a colon (:) separator by default. If you have selected the list layout, you will be able to change the separator in the "List separator" dropdown.
- Label weight: Whether you would like your labels (column headers) to be boldened or not
- Open duration: The duration of the opening transition (in milliseconds)
- 4
- Different panel layout options
- There are five layout options for popup panels:
-
- Overlay: Displays a panel on top of the visualization
- Left: Opens a panel from the left side of the visualization. This option can be sticky.
- Right: Opens a panel from the right side of the visualization. This option can be sticky.
- Top: Opens a panel from the top of the visualization. This option can be sticky.
- Bottom: Opens a panel from the top of the visualization. This option can be sticky.
-
You can select your preferred layout position in the "Popups & panels" settings. In order for your panels to appear by default, you can turn on the "Always show" setting.
