Skip to content

Latest commit

 

History

History
85 lines (57 loc) · 4.11 KB

tooltip.spec.md

File metadata and controls

85 lines (57 loc) · 4.11 KB

Nimble Tooltip

Overview

The nimble-tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it. It typically appears after a small delay and disappears when Escape is pressed or on mouse out. The Nimble tooltip is based upon FAST's tooltip component

The nimble-tooltip project will first be implemented as a prototype, open issues listed below will be addressed once the prototype is functional.

Background

Nimble issue #309: Tooltip

Visual desgin spec

Design

API

FAST tooltip API

Plan to extend API to support all cases shown in visual design XD document. Will add once tooltip is sucessfully implemented with one case.

Plan to first implement the tooltip and let the client choose which type of tooltip (general, error, info) they want Additional changes to API expected in the future, but will not be included in first pass of implementation. Listed in Future Improvements and Open Issues

  • Component Name: nimble-tooltip
  • Properties/Attributes: Unchanged
  • Methods: Unchanged
  • Events: Unchanged
  • CSS Classes and Custom Properties that affect the component: None
  • Slots: Unchanged
  • Template: Unchanged

Future Improvements

Attribute for switching between error and info states of tooltip Easier integration with other nimble components

Angular integration

An Angular directive will be created for the component. The component will not have form association, so a ControlValueAccessor will not be created.

Blazor integration

A Blazor wrapper will be created for the component.

Additional requirements

  • User interaction: Do the FAST component's behaviors match the visual design spec? When they differ, which approach is preferable and why?
    • No additional requirements
  • Styling: Does FAST provide APIs to achieve the styling in the visual design spec?
    • FAST API most likely won't be sufficient for creating extra states in spec, will be adressed later on.
  • Testing: Is FAST's coverage sufficient? Should we write any tests beyond Chromatic visual tests?
    • Will look at options as building, testing may be difficult because only displayed on hover.
  • Documentation: Any requirements besides standard Storybook docs and updating the Example Client App demo?
    • No additional requirements
  • Tooling: Any new tools, updates to tools, code generation, etc?
    • No additional requirements
  • Accessibility: keyboard navigation/focus, form input, use with assistive technology, etc.
    • Aria-describedBy recommendation in storybook docs for tooltip for developers
  • Globalization: special RTL handling, swapping of icons/visuals, localization, etc.
    • No additional requirements
  • Performance: does the FAST component meet Nimble's performance requirements?
    • No additional requirements
  • Security: Any requirements for security?
    • No additional requirements

Open Issues

When user is using nimble tooltip and nimble components, is there an easier way to add a tooltip so they wouldn't have to anchor to an html element every time they want a tooltip?

  • Update nimble controls to have tooltip show and be tooltip aware
  • Create a tooltip in the shadow dom internally, would not require a separate tooltip element.
  • If we don't do anything, at least provide an easy way to create unique ids.

Can tooltip be found by screen reader?

For testing, can we force the tooltip to be visible without hover? Possible Ideas

Mobile tooltip is not very functional- have to click on button to show tooltip, and clicking away does not make it disappear