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.

jQueryUI

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:

  1. Copy the necessary jQuery UI tooltip library files to Content/Resources/Scripts in your Flare project (Core, Position, Widgets, ToolTip, Widget)
  2. Copy (our custom .js to call the tooltip) tooltipInit.js to Content/Resources/Scripts in your Flare project.
    Scripts_ContentExplorer
  3. Make sure you’ve added the images you want to use for the tooltip effects to Content/Resources/Images in your Flare project.
  4. Using Flare’s CSS editor, Create a span class called imageTooltip. (span.imageTooltip in the CSS)
  5. 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.
  6. 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.

MasterPage_with_Code

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.

Example:

span_code

Please leave any questions/comments below!

Edit:  You can check out the image tooltip in action by hovering over the text located here:

http://ts.madcapsoftware.com/Downloads/HTML5_jQuery_tooltip/Default.htm

 

 

 

About The Author

Jose Sermeno

About Jose Sermeno

With over 10 years of experience in the software industry, Mr. Sermeno brings a wealth of knowledge and expertise to the product evangelist team, helping introduce new users to everything MadCap Software. In his spare time, Jose is the Project Director for San Diego City Robotics, the San Diego community college systems robotics program, and enjoys working in software design and open source hardware development. Prior to joining MadCap in late 2010, Jose ran a Drupal development shop, and was an application manager for Temple University Health System.

Last Modified: December 9, 2016

This entry was posted in HTML5, MadCap Flare, Tech Comm, Tips & Tricks. Bookmark the permalink.

Comments

  • Bart Bogaert June 20, 2013 at 6:42 AM

    Is it also possible to add a tooltip to a thumbnail?

  • Lionel July 7, 2013 at 3:38 AM

    Hi,

    Unfortunately the project link is broken,

    I’m trying to add a vertical tab ui, can you help me with that?

    Thanks,

    Lionel

    • Jose Sermeno Jose Sermeno July 8, 2013 at 10:58 AM

      Hi Lionel!

      Thanks for the note regarding the project link. WordPress pre-pends urls – its been fixed now and should work with no issues.

      Regarding your “vertical tab ui” – if you’re looking to add navigation, or menu elements, you can add them just as you would any HTML page. A simple overview of doing this with lists and css can be found here: http://www.w3schools.com/css/css_navbar.asp

      If you’re looking to modify the navigation tabs of the HTML5 output into a vertical orientation, that will require post-processing work of the Flare generated skin data – as the compiler builds the navigation menu as configured in the .flskn of the Target.

  • Emma November 27, 2013 at 9:10 AM

    Project link still appears to be broken?
    Thanks in advance.

    • Jose Sermeno Jose Sermeno November 27, 2013 at 9:41 AM

      Thanks for the note! Project link has been fixed.

  • Emma November 28, 2013 at 8:42 AM

    Thanks for fixing this so quickly, Jose. I thought I’d followed your instructions to the letter, but hovering over the relevant word displays a broken link icon. Any suggestions where I might be going wrong??

    Also, I’d like to know if it’s possible to use this tooltip trick in image maps. Rather than clicking the image to open a linked topic or hovering over the image to display some text, I’ve been asked to see if I can enable users to hover over various areas of the image and display another, smaller image with alt text on it. I’m assuming it IS possible, but can’t work out how.

    Many thanks in advance
    Emma.

    • Jose Sermeno Jose Sermeno December 2, 2013 at 2:30 PM

      Hey Emma,

      You may be seeing a cached version of the page still. Try getting the files from here: http://ts.madcapsoftware.com/Downloads/Image%20Tooltip.flprjzip

      Regarding the use of an imagemap in this scenario – it will work but you’ll need to come up with the javascript that invokes the image pop-up based on the hover-over occurring on the image map section (identified by the map id written into the html topic in the output).

  • Jai November 30, 2016 at 11:10 PM

    Thank you Jose. I was specifically looking for tooltip image handled through Flare. But the sample project URL (http://ts.madcapsoftware.com/Downloads/Image%20Tooltip.flprjzip) is broken. Can you share this file again please.

    • Rachel Kim Rachel Kim December 8, 2016 at 3:58 PM

      Hi Jai! We’re currently working on reuploading the project, will reply again once it’s fixed!

Have Something to Say?

Your email address will not be published. Required fields are marked *