Inline tooltips

[marteki]

Moving this part of the discussion from issue #139.

There's use cases for having tooltips inline, possibly in paragraph text. When this happens, our traditional methods of placing a icon after the text to be explained might not work as well.

The tooltips might be in a single line, surrounded by text.

Or, they might be in a paragraph of text. Ideally, we'd be using plain language that wouldn't require explanations of terms outside the textual content. Due to various reasons, that doesn't always occur.

We have instances where rather than a icon, the text to be defined is underlined. However, in those instances, the interaction of tapping on that underlined text currently doesn't result in a tooltip or a pushover. The definition is given in a frame-like panel of the webpage.

Rephrased comments and questions from the previous issue that this was discussed in:

• The blue color for the tooltip could be a little distracting. We use blue consistently to show something can be activated, but should we consider toning down the impact? When used inline with text, it can disrupt the flow. Would gray or a lighter blue solve that and still maintain accessibility? (Answer given: White is only accessible on full-on Pacific Blue. The question mark would have to change to black to use a lighter blue.)
• When a tooltip icon is inline with radio buttons, it might seem at first glance like an additional option.
• Should inline tooltips follow a pattern of using a simple underline with a background color change on hover? If so, what would the indication that it's different from a link be for touch devices? And are there accessibility considerations in making it look so similar to a link? Are there concerns with having a gray underline on a white background?
• How successfully can users determine the difference between a blue underline and gray underline (and their expected behavior)?

[ielerol]

For what it's worth, we do have an outstanding issue in eRegs to differentiate the underlines for definitions from the underlines for links. It wasn't a high enough priority to make it into the changes that will be rolled out in the next month, so we haven't done a lot of exploration, but the initial thought was to change the definition links to a dotted underline style. Which only works in this case because the eRegs unvisited hyperlinks are solid rather than dotted.

Although eRegs might not be the ideal model currently, I do think some kind of text-based visual distinction is less obtrusive than the minicon icons, when inline in text paragraphs. We've discussed also adding a faint background gray to the defined terms, lighter than the hover state gray.

[nataliafitzgerald]

DM Styling edits:

• For content under the H3's, the width of the content should be 560 px (to match the DM styling). Update intro paragraph under "Style", "Special cases..."Inline" (also, it looks like you have skipped a header level here, was that intentional?)
• The space under the rule line that comes after "Style" should be the same as the space under the rule line that comes after "Use".
• How are you aligning the images that come to the right of the bullet lists? It looks like some are top aligned to the header for that list and some are lower down. For example, "hover" (top aligned) versus "activated" (lower down).

[caheberer]

Similar to tabs, are they needed and how do we want to document on the manual?

[caheberer]

This will be documented in #139