NoRedInk / noredink-ui / Nri.Ui.Tooltip.V3

Patch changes:

Changes from V2:

These tooltips aim to follow the accessibility recommendations from:

view : { trigger : List (Accessibility.Styled.Attribute msg) -> Accessibility.Styled.Html msg, id : String } -> List (Attribute msg) -> Accessibility.Styled.Html msg

Here's what the fields in the configuration record do:

viewToggleTip : { label : String, lastId : Maybe String } -> List (Attribute msg) -> Accessibility.Styled.Html msg

Supplementary information triggered by a "?" icon.

This is a helper for setting up a commonly-used disclosure tooltip. Please see the documentation for disclosure to learn more.


type Attribute msg

paragraph : String -> Attribute msg

Provide a plain-text string that will be put into a paragraph tag, with the default margin removed.

plaintext : String -> Attribute msg

Provide a plain-text string.

markdown : String -> Attribute msg

Provide a string that will be rendered as markdown.

html : List (Accessibility.Styled.Html msg) -> Attribute msg

Provide a list of custom HTML.

withoutTail : Attribute msg

Makes it so that the tooltip does not have a tail!

onTop : Attribute msg

 __________
|         |
|___  ____|
    \/

onBottom : Attribute msg

 ___/\_____
|         |
|_________|

onLeft : Attribute msg

  __________
 |         |
 |          >
 |_________|

onRight : Attribute msg

  __________
 |         |
<          |
 |_________|

onTopForQuizEngineMobile : Attribute msg

Set the position of the tooltip when the quiz engine breakpoint (750px) applies.

 __________
|         |
|___  ____|
    \/

onBottomForQuizEngineMobile : Attribute msg

Set the position of the tooltip when the quiz engine breakpoint (750px) applies.

 ___/\_____
|         |
|_________|

onLeftForQuizEngineMobile : Attribute msg

Set the position of the tooltip when the quiz engine breakpoint (750px) applies.

  __________
 |         |
 |          >
 |_________|

onRightForQuizEngineMobile : Attribute msg

Set the position of the tooltip when the quiz engine breakpoint (750px) applies.

  __________
 |         |
<          |
 |_________|

onTopForNarrowMobile : Attribute msg

Set the position of the tooltip when the narrow mobile breakpoint (500px) applies.

 __________
|         |
|___  ____|
    \/

onBottomForNarrowMobile : Attribute msg

Set the position of the tooltip when the narrow mobile breakpoint (500px) applies.

 ___/\_____
|         |
|_________|

onLeftForNarrowMobile : Attribute msg

Set the position of the tooltip when the narrow mobile breakpoint (500px) applies.

  __________
 |         |
 |          >
 |_________|

onRightForNarrowMobile : Attribute msg

Set the position of the tooltip when the narrow mobile breakpoint (500px) applies.

  __________
 |         |
<          |
 |_________|

onTopForMobile : Attribute msg

Set the position of the tooltip when the mobile breakpoint applies.

 __________
|         |
|___  ____|
    \/

onBottomForMobile : Attribute msg

Set the position of the tooltip when the mobile breakpoint applies.

 ___/\_____
|         |
|_________|

onLeftForMobile : Attribute msg

Set the position of the tooltip when the mobile breakpoint applies.

  __________
 |         |
 |          >
 |_________|

onRightForMobile : Attribute msg

Set the position of the tooltip when the mobile breakpoint applies.

  __________
 |         |
<          |
 |_________|

alignStart : Css.Px -> Attribute msg

Put the tail at the "start" of the tooltip. For onTop & onBottom tooltips, this means "left". For onLeft & onRight tooltip, this means "top".

 __________
|_  ______|
  \/

alignMiddle : Attribute msg

Put the tail at the "middle" of the tooltip. This is the default behavior.

 __________
|___  ____|
    \/

alignEnd : Css.Px -> Attribute msg

Put the tail at the "end" of the tooltip. For onTop & onBottom tooltips, this means "right". For onLeft & onRight tooltip, this means "bottom".

 __________
|______  _|
       \/

alignStartForQuizEngineMobile : Css.Px -> Attribute msg

Put the tail at the "start" of the tooltip when the viewport has a quiz engine mobile (750px) width or narrower. For onTop & onBottom tooltips, this means "left". For onLeft & onRight tooltip, this means "top".

 __________
|_  ______|
  \/

alignMiddleForQuizEngineMobile : Attribute msg

Put the tail at the "middle" of the tooltip when the viewport has a quiz engine mobile (750px) width or narrower.

 __________
|___  ____|
    \/

alignEndForQuizEngineMobile : Css.Px -> Attribute msg

Put the tail at the "end" of the tooltip when the viewport has a quiz engine mobile (750px) width or narrower. For onTop & onBottom tooltips, this means "right". For onLeft & onRight tooltip, this means "bottom".

 __________
|______  _|
       \/

alignStartForNarrowMobile : Css.Px -> Attribute msg

Put the tail at the "start" of the tooltip when the viewport has a narrow mobile (500px) width or narrower. For onTop & onBottom tooltips, this means "left". For onLeft & onRight tooltip, this means "top".

 __________
|_  ______|
  \/

alignMiddleForNarrowMobile : Attribute msg

Put the tail at the "middle" of the tooltip when the viewport has a narrow mobile (500px) width or narrower.

 __________
|___  ____|
    \/

alignEndForNarrowMobile : Css.Px -> Attribute msg

Put the tail at the "end" of the tooltip when the viewport has a narrow mobile (500px) width or narrower. For onTop & onBottom tooltips, this means "right". For onLeft & onRight tooltip, this means "bottom".

 __________
|______  _|
       \/

alignStartForMobile : Css.Px -> Attribute msg

Put the tail at the "start" of the tooltip when the viewport has a mobile width. For onTop & onBottom tooltips, this means "left". For onLeft & onRight tooltip, this means "top".

 __________
|_  ______|
  \/

alignMiddleForMobile : Attribute msg

Put the tail at the "middle" of the tooltip when the viewport has a mobile width.

 __________
|___  ____|
    \/

alignEndForMobile : Css.Px -> Attribute msg

Put the tail at the "end" of the tooltip when the viewport has a mobile width. For onTop & onBottom tooltips, this means "right". For onLeft & onRight tooltip, this means "bottom".

 __________
|______  _|
       \/

exactWidth : Basics.Int -> Attribute msg

Define a size in px for the tooltips's total width. The default is 320px.

fitToContent : Attribute msg

Tooltip width fits its content.

smallPadding : Attribute msg

normalPadding : Attribute msg

This the default spacing.

customPadding : Basics.Float -> Attribute msg

Pass in the desired spacing around the edge of the tooltip (pixels).

onToggle : (Basics.Bool -> msg) -> Attribute msg

The Tooltip event cycle depends on whether you're following the Disclosure pattern, but disguising the Disclosure as a tooltip visually or you're actually adding a hint or label for sighted users.

If you're adding a tooltip to an element that does something on its own, e.g., a "Print" ClickableSvg, then it doesn't make sense for the tooltip to change state on click/enter/space.

However, if you're adding a tooltip to an element that is not interactive at all if you don't count the tooltip, then we can use the click/enter/space events to manage the tooltip state too. This style of "tooltip" is the only kind that will be accessible for touch users on mobile -- it's important to get the access pattern right!

If the tooltip behavior you're seeing doesn't feel quite right, consider whether you need to change tooltip "types" to disclosure or to auxiliaryDescription.

onTriggerKeyDown : List (Accessibility.Styled.Key.Event msg) -> Attribute msg

Add additional keydown handlers to the trigger element.

This is required rather than applying them directly to the trigger element because the attributes passed into the trigger view function (to be applied to the trigger) include an onKeyDown event handler that is used to close the tooltip when the escape key is pressed, and Elm requires that only one onKeyDown event handler be applied to an element (otherwise, the last one wins).

stopTooltipMousePropagation : msg -> Attribute msg

Stops propagation of mouseup / mousedown / click on the tooltip bubble.

Use this if your tooltip is contained withing a clickable/draggable element and you do not want clicking on the tooltip bubble to act like a click on the parent.

open : Basics.Bool -> Attribute msg

Pass a bool indicating whether the tooltip should be open or closed.

css : List Css.Style -> Attribute msg

Set some custom styles on the tooltip.

notMobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is wider than NRI's mobile breakpoint.

Equivalent to:

Tooltip.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.notMobile ] styles ]

mobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is narrower than NRI's mobile breakpoint.

Equivalent to:

Tooltip.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.mobile ] styles ]

quizEngineMobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is narrower than NRI's quiz-engine-specific mobile breakpoint.

Equivalent to:

Tooltip.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.quizEngineMobile ] styles ]

narrowMobileCss : List Css.Style -> Attribute msg

Set styles that will only apply if the viewport is narrower than NRI's narrow mobile breakpoint.

Equivalent to:

Tooltip.css
    [ Css.Media.withMedia [ Nri.Ui.MediaQuery.V1.narrowMobile ] styles ]

containerCss : List Css.Style -> Attribute msg

custom : List (Accessibility.Styled.Attribute Basics.Never) -> Attribute msg

Use this helper to add custom attributes.

Do NOT use this helper to add css styles, as they may not be applied the way you want/expect if underlying styles change. Instead, please use the css helper.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

primaryLabel : Attribute msg

Used when the content of the tooltip is identical to the accessible name.

For example, when using the Tooltip component with the ClickableSvg component, the Tooltip is providing extra information to sighted users that screenreader users already have.

This is the default.

auxiliaryDescription : Attribute msg

Used when the content of the tooltip provides an "auxiliary description" for its content.

An auxiliary description is used when the tooltip content provides supplementary information about its trigger content.

helpfullyDisabled : Attribute msg

Used when the tooltip trigger is disabled.

Provides information about why the tooltip trigger is disabled.

disclosure : { triggerId : String, lastId : Maybe String } -> Attribute msg

Sometimes a "tooltip" only looks like a tooltip, but is really more about hiding and showing extra information when the user asks for it.

If clicking the "tooltip trigger" only ever shows you more info (and especially if this info is rich or interactable), use this attribute.

For more information, please read Sarah Higley's "Tooltips in the time of WCAG 2.1" post.

You will need to pass in the last focusable element in the disclosed content in order for:

You may pass a lastId of Nothing if there is NO focusable content within the disclosure.