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).
Add hotspots and fill out the required fields. Configure additional options if desired.
Move and resize the hotspot to suit your needs. Add other hotspots as needed.
Preview your hover map on the Preview tab.
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
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.
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.
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:
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.
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.
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.
In your hover map HTML, find the hotspot you want to modify. Hotspots are the link elements inside the hoverMap <div>.
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 position.target with a value of "mouse".
Examine the Values for that option.
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: data-position.target="mouse".
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 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.
Utilizing language and technology to generate unique solutions