HoverPoint is our new tool focused on Frontline Worker scenarios that can help your team in a variety of scenarios such as returning to the office or providing health and safety information on site. It allows you to make images into interactive components which can be marked up with information at specific points to make it more engaging for users.
Each point in a HoverPoint displays a card on hover which can include text, links, images and videos, and the cards can be paged through in order using the buttons at the bottom of the card.
HoverPoint supports "freestyle" definition of the hover areas, meaning you can create a complex shape using many lines to outline a very specific area, rather than just a circle with an adjustable radius.
From Atlas 4.2 onwards, each HoverPoint can be configured to Open in a new tab or Open in a modal window. Additionally, you can now Import and Export HoverPoint configuration for reuse. You can find out more here:
In this article:
- Add the HoverPoint web part
- Configure the HoverPoint web part
- Import and Export HoverPoint configuration
Add the HoverPoint web part
To get started, Edit the page where you want to add the HoverPoint, then add a web part to the page. You can find HoverPoint in the web part picker by searching for it:
If you will be using a large image or want to accomodate a lot of information points, we recommend adding this web part to a One Column or Full Width section to make the most of the space on the page.
For large HoverPoints you should consider using a full page for each one so the detail of the image can still be seen.
Configure the HoverPoint web part
There are two steps required to configure a HoverPoint, the main Image and the Information Points.
Please note that images may initially load in low quality and/or incorrectly sized depending on your connection. To fix this simply move your mouse then hover again to force it load correctly.
Add the main Image
Once you have added the web part click Set Up on it to open the configuration panel on the right:
- First, click Browse Image to open the Image picker. Choose the image you want to set up as a HoverPoint. If you already added an image, you'll see a Change button instead.
- Enter the Title to be displayed above the HoverPoint in the page
- Enter Alternative Text to explain what is shown in the image for users with screen readers
- Click HoverPoints to start configuring the information points on the image and the content they will display. After clicking the HoverPoints button you'll see this panel on the right hand side:
Click the + to add your first HoverPoint.
Configure "freestyle" HoverPoints for an image
When defining a point you can choose between Ring and Draw your selection - choosing the latter lets you define a custom area:
If you have an earlier version of Atlas or plan to use the Ring option please go straight to the next section: Configure the HoverPoints for an Image
After clicking Draw your selection you can start to click on points in the image and each subsequent point will be connected by a line. So for example you can use many points to create an area with a specific shape rather than being restricted to a circle, for example:
Rather than a circle around the icon, we have defined a specific shape so that anywhere inside that shape that the user hovers or clicks they will trigger the interaction.
You can also choose the Type of user interaction for this area. While the Ring area can only display on hover, the "freestyle" area allows us to choose between On Hover and On Click for the interaction:
You'll now need to set the rest of the details as usual, such as the Title, Message, Theme etc. which you can follow through in the linked section: Set the details for your hover card
In Atlas 4.2 onwards, you can configure any On Click HoverPoints to open in a new tab or modal window:
Configure the HoverPoints for an Image (Ring)
First, click on the image in the location you want to display your HoverPoint. This will set the Position for the point which you can then fine tune using the sliders in the right hand panel. You can change the X and Y position of the point either by dragging and dropping the existing point on the image, or using the controls in the right hand panel. To set the interaction radius around the point which will activate it, use the right hand panel:
You can see the Radius visualised on each HoverPoint, so for example, below you can see the difference between a 5% and 10% radius:
Next, set the details for the hover card.
Set the details for your hover card
Set the Title, Message and Theme for the card that will display on hover, and optionally set an Image to be shown above the card. In the Message area you can add text, links and images, so you can use the Image to set a Header image above the card, and the Message to set the information in the card, which can also contain images.
Finally, choose an Icon for the HoverPoint and the theme for the icon. Click the Browse icons button to see the full gallery of icons, and use the Search at the top of the icon gallery to search the icons by name.
You can hover over the point you are configuring at any time to see what it will look like. When you are happy with it, click Save at the bottom of the panel to add your point:
After saving you will be returned to the list of HoverPoints.
Manage the HoverPoints for an Image
Once you have created some HoverPoints you may want to edit or reorder them.
To reorder the HoverPoints, click and hold on the "bars" to the left of the item, then drag it in the list to where you want it. This will determine the order when paging through the cards on the image.
To Edit a HoverPoint, click the "pencil" icon to the right of the item you want to edit. This will reopen the configuration panel and you can make your changes and Save.
To Delete a HoverPoint, click the "bin" icon to the right of the item you want to delete. You'll get a confirmation before it is deleted - click Yes to delete:
Import and Export HoverPoint configuration
In Atlas 4.2 onwards, the configuration of the HoverPoint web part, including all individual HoverPoints. This allows you to reuse the same configuration across Atlas without having to rebuild every time.
To take advantage of this, edit the HoverPoint web part, and expand the Import/Export settings section:
Settings can be stored either Globally or in This Workspace. To export to the Global storage you will need at least Member permissions on the Atlas Configuration workspace. To export to This Workspace you will need at least Member permissions in the current workspace.
To export the settings, choose the storage location at the top, then type the filename you'd like to use for these settings and click Save settings. Please consider the name you use so that other editors know what to expect if they import your settings.
To import settings, choose the storage location then click the Import settings button and choose the file containing the configuration you want to import. You can do this with a completely new HoverPoint web part and all settings will be set as per the saved configuration.
Please sign in to leave a comment.