Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I save my changes in Kumu?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page
  • Basic popover syntax
  • Using markdown to style the popover
  • Resizing the popover
  • Use cases
  • Show connection labels on demand
  • Bring the profile into the popover
  • Highlight key facts and figures

Was this helpful?

Edit on GitHub
  1. Guides
  2. Decorations

Popovers

PreviousLabel templatesNextDefault view settings

Last updated 1 month ago

Was this helpful?

are great for including detailed background information about what you’re mapping. But sometimes they can be a bit overkill, and they do take up a lot of precious screen space. Sometimes you want to share just a little bit more context about an element or connection without having to open the profile.

Popovers allow you to display fields from the profiles when someone hovers over an element, connection, or loop.

When you're editing the map, the will hide popovers.

Basic popover syntax

Popovers are added through the Advanced Editor, using a simple syntax.

selector {
  popover: "{{Field name}}";
}

For example, here is the code for an element popover that includes the label and element type:

element {
  popover: "{{label}} {{element type}}";
}

When using the Type field in popovers, you need to specify whether it is Element Type, Connection Type, or Loop Type. For example, use {{connection type}}

when adding Type to a connection's popover.

Using markdown to style the popover

Here's a popover that uses markdown to style the label, add a horizontal rule, and add line breaks in between the fields:

chapter {
  popover: "### {{label}}  ---  {{topic sentence}}  {{image}}";
}

Note that popovers automatically recognize images, so there's no need to style those with markdown. This works with hyperlinks as well—just use something like {{website}} or {{image}} in your popover, and the popover will render it properly.

Popovers also recognize multi-pick fields (like Tags) and will render them as bulleted lists.

Resizing the popover

Kumu sets default popover sizes based on how much content is in each popover, but you can override these defaults using the popover-height, popover-width, and popover-padding properties. height and width control the vertical and horizontal size of the popover box, and padding controls the space between the edge of the popover and its contents.

chapter {
    popover: "### {{label}}  ---  {{topic sentence}}  {{image}}";
    popover-height: 200;
    popover-width: 300;
    popover-padding: 3;
}

Good to know:

  • popover-width is a great tool if you want to set a maximum width for images that you want to include in the popover. Kumu will resize the image to fit your popover-width without stretching or distorting the image.

  • If the height of your content exceeds your popover-height, Kumu will add a vertical scroll bar to your popover.

Use cases

Here are just a few cases where we think popovers are useful!

Show connection labels on demand

Sometimes you want to use connection labels to add information (such as role or nature of a relationship) but don’t want those showing up on the map all the time. In that case, just add the following:

connection {
  label-visibility: hidden;
  popover: "{{label}}";
}

Bring the profile into the popover

The profile is great when you have a lot of information in the description as well as a number of fields. But when you only have one or two fields, sometimes it is easier to disable the profile and just use popovers instead.

Our first step is to disable the profile for everything on the map:

* {
  profile: false;
}

We can then activate the popover for all elements and connections:

element, connection {
   popover: "### {{label}}  {{image}}  {{description}}";
}

Highlight key facts and figures

Ever sized elements or connections based on a quantitative data, but didn’t want people to have to dig through the profile to find the number? Use popovers to display those values instead:

element {
  popover: "**Money raised for:** ${{money raised for}}  **Money raised against:** ${{money raised against}}"
}

However, anyone who has view-only access to the map or is viewing a or a will still see your popovers (the direct decorations toolbar is hidden for them, since they can't make edits to your map).

If you're building popovers and want to see how they look before you publish, you can either follow the instructions in the to turn off the direct decorations toolbar, or simply click the ellipsis icon in the bottom right corner and select "Switch to preview mode".

Replace selector with any valid , and replace Field name with the name of any of your fields. Remember to wrap each field name in double curly brackets {{}} and wrap the entire popover value in double quotes.

You can use to add italics, bold text, videos, and more to your popover. You can also add double spaces to create line breaks.

presentation
shared/embedded map
direct decorations guide
selector
markdown
Profiles
direct decorations toolbar