Tooltip for Drop-down & Glossary icons

[milewski]

Hello,

I was wondering if anyone knew how to make the images associated with drop-down and glossary links have a tooltip?

I have copied the 4 images into the images folder:

• DropDownClosed.gif
• DropDownOpen.gif
• ExpandingClosed.gif
• ExpandingOpen.gif

I used MadCap Capture to add both a Screen Tip and Alternate Text to the image. The corresponding .props files were created. I then modified the style sheet to point MadCap|glossaryTerm’s, MadCap|dropdown’s and MadCap|expanding’s mc-closed-image and mc-open-image to the corresponding files in the Image folder.

After building my WebHelp, the tooltips do not appear.

Because there is no alt text for the links, this is necessary to meet the 508 compliance for § 1194.22 Web-based intranet and internet information and applications; (a) A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).


Thanks for any help available.

[LTinker68]

I'm not positive since I don't have to design 508-compliant help, but in a quick Google search, I saw several comments that said that if an image is inserted via the stylesheet then it's assumed to be a decorative image and therefore doesn't need the ALT tag. It's only if the image is meant to convey information that it needs to have an ALT tag, in which case you insert it as a normal img tag in the topic and not via the stylesheet.

So I don't think you have to worry about ALT tags for togglers, drop-downs, lists, etc. But you should double-check that at the official 508 compliance website or resource that lists all the particulars.

[milewski]

If the link that displays the drop-down content or the expanding content had a tooltip that would be true. The problem is that there is no way to add alt text to the links themselves. The icon would be an easy way to add the alt text for all of these types of links. I believe that using the icon in this way would be acceptable for giving a description to the associated links. If there is a way to give the links themselves alt text, that would be better, but I thought that would be more difficult to accomplish.

[LTinker68]

I don't see a way to add a screen tip to a toggler or drop-down through any of the GUIs, so you'll want to submit a feature request for that. But in the meantime, you can open the topic in the Internal Text Editor and manually add the title or alt attributes to the appropriate toggler or drop-down tag. Although you'll need to test it to make sure that those attributes appear in the output.

There are a few other things in Flare that don't support 508-compliance, so I suggest you submit separate feature requests for them. For instance, if you click the bold icon in the formatting toolbar, then it should insert <strong> tags, not <b> tags. And the italics icon should insert <em>, not <i>.

[ENJ]

I opened my topic with the Internal Text Editor but cannot seem to figure where I would add the title or alt tag.
For example, for the expand hotspot, I have:
<li class="ListBullet">
<MadCap:expanding>
<MadCap:expandingHead class="expandspot">Main:</MadCap:expandingHead>
<MadCap:expandingBody class="expandtext">Contains a general overview of the project, its type, and content management settings.
</MadCap:expandingBody>
</MadCap:expanding>
</li>
Where exactly would you add these tags?!

[LTinker68]

I believe you're supposed to put them with the hyperlink, which in this case would be in the MadCap:expandingHead tag. So try modifying the tag to the following:

Code: Select all

<MadCap:expandingHead class="expandspot" alt="Your text here" title="Your text here">Main:</MadCap:expandingHead>

I have no idea if that will work, but theoretically it should.

[ENJ]

Thanks for your help but unfortunately, after compile, the alt tag is removed from the output (cannot even see it when I View Source).

[LTinker68]

Had a feeling. Since it's a custom tag, it must not have been set up to pass the ALT and TITLE properties to the output. Make sure you submit a feature request to http://www.madcapsoftware.com/bugs/submit.aspx and ask that all MadCap custom tags provide properties for meeting 508-compliance standards.

[ENJ]

I did that already.
I even submitted an email support case and got two different replies. The first one was "you will need to manage your content to fit some of the 508 rules. Items such as Togglers, Drop-downs, and pop-up links are not compliant because they by default hide text, and therefore should not be used if you're focusing your content towards 508 compliance." and then "The images for the drop-downs, togglers, and pop-ups are explained by the surrounding text. Although automated testing tools will note there is no alternative text, as long as you provide a textual explanation for the drop-down, toggler, or pop-up link then there should be no problems with actual Section 508 compliance."

All we really need them to do is add an ALT tag (can even be a generic one stating "click to expand" or "click to display", etc) to their custom controls.

I do wonder how many Flare users out there need to provide 508 compliant help. Anyone out there, please drop me a line. How are you managing?

[milewski]

It turns out that user micsta has managed to figure out how to make the title tag work with togglers. In the same method that LTinker68 mentioned above, the title attribute can be added to the Flare source code and when it is built, the tooltip appears. This method does not seem to work for the other expanding text options.

Code: Select all

<MadCap:toggler targets="TogglerDiv" title="Select to view...">Select to view...</MadCap:toggler>

To make the change to the Flare file, we open the file in Notepad to make the code addition. So that we do not have to make the same change to every page that uses similar togglers, we created a snippet out of the modified toggler. Then we insert the snippet and convert to text to use the toggler.

[ajturnersurrey]

I found this very old thread - has anyone since 2009 found a way to include a tooltip on hover over a dropdown hotspot. (It would be so much neater than writing extra to introduce the dropdowns.)