Aww man! Another weblog? Ugh, I hope the Internet gets full soon.

How to make and use hover maps in Flare

May 24, 2017

*psst* Don't know what a hover map is? Check it out in action!

Creating hover maps using the Hover Map Generator

  1. Using the Hover Map Generator tool, import the image you want to use for a hover map.
  2. Give the hover map a unique name (without using spaces or special characters). This allows you to have multiple hover maps on one page. The first character cannot be a number (this is a CSS rule and I can't do anything about that).
  3.  Add hotspots and fill out the required fields. Configure additional options if desired.
  4. Move and resize the hotspot to suit your needs. Add other hotspots as needed.
  5. Preview your hover map on the Preview tab.
  6. When done, switch to the Generated Code tab and copy the HTML into the topic where you want the hover map to appear and copy the CSS into hovermapHotspots.css.

Implementing hover maps in Flare HTML outputs

  1. Create a hovermap folder in Content --> Resources and download hovermap.js and hovermapCore.css into that folder. You also need to create a new, empty hovermapHotspots.css style sheet in that folder.
  2. Create a qtip2 folder in Content --> Resources and download my modified jquery.qtip.js and jquery.qtip.css into that folder. You can't use a regular, production version due to reasons.
  3. From your master style sheet (probably MainStyles.css in TopNav), and add links to hovermapCore.css, hovermapHotspots.css, and jquery.qtip.css (select and add them in that order). If you don't know how to add links, here's how:
Animation of adding style sheet links in Flare
  1. In your master page (typically OtherTopics.flmsp for TopNav), just before the closing </body> tag, add links to the jquery.qtip.js and hovermap.js scripts.
  1. Create as many hover maps as you want using the tool, copy the HTML into the topics where you want hover maps to appear, and copy the CSS into hovermapHotspots.css.
Hover map HTML markup in a Flare topic
‍Hover map hotspot CSS rules in the hovermapHotspots.css file

Customizing your hotspots (optional)

I plan to build this functionality into the generator itself at some point. For now, you can customize your hotspots using this method.

If you want to customize how the hotspot popups look, you'll have to edit the hovermapCore.css file (specifically, the .popUp ruleset).

Hover maps are powered by a free-to-use jQuery plugin called qTip2. That plugin supports many customization options. The script I wrote to make hover maps detects when you want to use those customized options, and applies them to whichever hotspots you like.

  1. In your hover map HTML, find the hotspot you want to modify. Hotspots are the link elements inside the hoverMap <div>.
  1. Go to the qTip2 options documentation. Determine which option(s) you want to use and take note of the syntax for that option. For example, if you want a hotspot popup to follow the user's mouse while they hover over the hotspot, you'd use with a value of "mouse".
  1. Examine the Values for that option.
  1. We can see that "mouse" is a supported value, so add a data HTML attribute to the link you want to apply this option to. Use the qTip2 syntax and values to build the data attribute, for example:"mouse".
The highlighted hotspot popup will follow the user's mouse while they hover over the hotspot

You're now empowered to do a ton of customization for your hotspots. For example:

  • Make a hotspot popup open on click (instead of hover) - Add this data attribute to a hotspot link: data-show.event="click".
  • Delay a hotspot popup fade out - Add this data attribute to a hotspot link: data-hide.delay="1000".

You can also make these customizations globally in the JSON of the  hovermap.js file. Just follow the qTip2 documentation. This forces all hotspot popups to behave in the customized way. I can provide limited support on how to adjust the hovermap.js script. If you need help, contact me.

I've provided a downloadable sample project with a working hover map to get you started.

Mike Kelley
Download sample project!
Mike has a love for technology and a strong desire to help others. He is a Certified MadCap Advanced Developer for Flare and loves being able to share his knowledge and experience with others on the MadCap forums and LinkedIn groups. By combining his technical expertise with his writing skills, Mike can develop clever and elegant solutions for any documentation project.