Recently a client wanted to include some custom .js to create an image pop-up hover-over effect when you hover your mouse over a word. This type of dynamic effect is an example of what can be found in the jQuery UI (user interface) library found here: http://jqueryui.com.
A tooltip is a simple pop-up text box for an element in HTML. If you want to create this effect for a word in a sentence, we’ll use a span tag, give it an attribute, and invoke the tooltip using .js. The unique aspect of this is that instead of using text for the tooltip, we’ll be referencing an image from your Flare project. This can just as easily be done referencing an image from a server, but the files included with this post package the image for distribution with the output. You also have the option of referencing the .js files externally from a server, but packaging the files ensures that the scripts will function.
Great news! A sample project with this working on some sample images can be downloaded from here. Download the project, and build the HTML5 target. When you view the topic, hover over the terms, and you’ll see the image tooltip!
From a high level, this will be your workflow:
- Copy the necessary jQuery UI tooltip library files to Content/Resources/Scripts in your Flare project (Core, Position, Widgets, ToolTip, Widget)
- Copy (our custom .js to call the tooltip) tooltipInit.js to Content/Resources/Scripts in your Flare project.
- Make sure you’ve added the images you want to use for the tooltip effects to Content/Resources/Images in your Flare project.
- Using Flare’s CSS editor, Create a span class called imageTooltip. (span.imageTooltip in the CSS)
- Create an IMG class called imageTooltip (IMG.imageTooltip in the CSS). On this class configure the “Opacity” property to be 1. The opacity property will need to be added to the class manually using the code editor. After adding using the editor, the property becomes modifiable in the advanced view of the CSS editor in Flare. For this class you’ll also want to copy the .css data from jquery.ui.tooltip.css theme file, and add the properties manually the the CSS in Flare.
- Insert the jQuery .js into the Masterpage used by the target. Order the scripts in the masterpage based on their inter-dependency with each other.
And thats all it takes to set up the project! To insert a mouseover effect on a word, first select the word in the topic, right click, choose “style class”, and select span.imageTooltip.
After you’ve applied the span tag to the word, save the topic, and view in the internal text editor. You’ll need to add the data attribute manually that references the tooltip, as well as the reference to the image that you’d like this particular word to invoke.
Please leave any questions/comments below!
Edit: You can check out the image tooltip in action by hovering over the text located here: