How to add custom content to your popups

To add images to a popup or customize the styling, you can use the "Custom content" option. You will find this option in the "Regions layer" settings in the Projection map or in the "Popups" settings in the Network graph, Scatter plot and 3D map templates. Our Hierarchy template currently only supports completely custom popups in leaf nodes.

Looking to edit your popups in the Line, bar and pie template? Those work slightly differently, more on that here.

    1
    Make sure the data you would like to display in your popups has already been bound in the "Select columns to visualise" panel in the Data tab

    2
    In the Preview tab, enable popups and select "Custom content"

    2
    In the area for custom content, add your images or custom content in HTML. You can also access information from other columns here by adding them in curly brackets ({{}}). Make sure that any data you try to access through brackets has been added to the "Select columns to visualise" area before. 
    Here's an image, for example: 
     
    <img src="{{Image}}" height="100"> <p>Party: {{Party}}</p><br>
    		
    And here's a link – Keep in mind that when you're adding links, they will have to start with an "http://" or an "https://" to display correctly:

    <a href="{{Link}}">Click me!</a>
    		
    You might want to make your link open in a new tab. You can achieve that by adding a target to your link:
    <a href="{{Link}}" target="_blank">Click me!</a>
    		
    3
    You can also add videos in the same way. To do this, upload your video to Flourish by right-clicking on the cell and selecting 'Upload file'. Then, refer to it via HTML.
    <video width="320" height="240"> <source src="{{Video}}" type="video/mp4"><br>
    		
    4
    If you're encountering the issue that some of your content is loading before the popup itself is loaded, you can add your image as the background of a div instead of as an image. To do this, simply add a div and give it a class of "image".

    <div class="image"></div>
    		
    Then, set the size of the popup and add your image as a background image within brackets. Make sure and add the property background-size: cover. Here's what the content of your "custom content" area should now look like:

    <div class="image">
    </div>
    
    <a href="http://flourish.studio" target="_blank">This is a link.</a>
    
    <style>
    .image{
    width: 220px;
    height: 150px;
    background-image:url("{{gif}}");
    background-size: cover;
    }
    </style>
    		
    5
    You can even add custom charts or polling results to your popups by referring to data within your datasheet, or hide certain information based on a column in your datasheet.
    6
    Completely custom popup content can only be added to leaf nodes (shapes representing a single value) in the Hierarchy template, but you can specify on which levels you would like popup content to display at all.