Skip to content
This repository has been archived by the owner on Jul 10, 2020. It is now read-only.

Inline tooltips #335

Closed
marteki opened this issue Jun 29, 2015 · 4 comments
Closed

Inline tooltips #335

marteki opened this issue Jun 29, 2015 · 4 comments

Comments

@marteki
Copy link
Member

marteki commented Jun 29, 2015

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.

screen shot 2015-06-29 at 11 10 43 am

screen shot 2015-06-29 at 11 11 05 am

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.

screen shot 2015-06-29 at 9 55 33 am

screen shot 2015-06-29 at 9 55 02 am

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.

eregs

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)?
@benguhin benguhin added the UI label Jul 31, 2015
@benguhin benguhin added this to the Foundational components milestone Jul 31, 2015
@benguhin benguhin added the 508 label Jul 31, 2015
@ielerol
Copy link
Member

ielerol commented Sep 2, 2015

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
Copy link
Contributor

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".
    screen shot 2015-09-15 at 12 19 31 pm
    screen shot 2015-09-15 at 12 19 51 pm
  • 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).
    screen shot 2015-09-15 at 12 10 57 pm

@caheberer caheberer removed this from the Foundational components milestone Feb 17, 2016
@caheberer
Copy link
Member

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

@caheberer
Copy link
Member

This will be documented in #139

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

5 participants