Nri.Ui.Tooltip.V2

Known issues:

tooltips with focusable content (e.g., a link) will not handle focus correctly for keyboard-only users when using the onHover attribute

Post-release patches:

fix overlay for onClick toolTip having a border
mark customTriggerAttributes as deprecated
add containerCss
adds nriDescription and testId

Changes from V1:

{Position, withPosition} -> {onTop, onBottom, onLeft, onRight}
withTooltipStyleOverrides -> css
{Width, withWidth} -> {exactWidth, fitToContent}
{Padding, withPadding} -> {smallPadding, normalPadding}
adds customPadding
adds custom for custom attributes
adds plaintext, html helpers for setting the content
pass a list of attributes rather than requiring a pipeline to set up the tooltip
move Trigger into the attributes
change primaryLabel and auxillaryDescription to attributes, adding view
move the onTrigger event to the attributes
extraButtonAttrs becomes attribute customTriggerAttributes
isOpen field becomes the open attribute
fold toggleTip and view into each other, so there's less to maintain
adds withoutTail

These tooltips follow the accessibility recommendations from: https://inclusive-components.design/tooltips-toggletips

Example usage:

    Tooltip.view
        { trigger =
            \attrs ->
                ClickableText.button "Click me to open the tooltip"
                    [ ClickableText.custom attrs ]
        , id = "my-tooltip"
        }
        [ Tooltip.plaintext "Gradebook"
        , Tooltip.primaryLabel
        , Tooltip.onClick MyOnTriggerMsg
        , Tooltip.open True
        ]

view :

{ trigger : List (Attribute msg) -> Html msg

, id : String

}

-> List (Attribute msg)

-> Html msg

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

trigger: What element do you interact with to open the tooltip?
id: A unique identifier used to associate the trigger with its content

toggleTip : { label : String } -> List (Attribute msg) -> Html msg

Supplementary information triggered by a "?" icon.

type Attribute msg

plaintext : String -> Attribute msg

html : List (Html msg) -> Attribute msg

withoutTail : Attribute msg

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

This will center the tooltip relative to the trigger content, superseding any custom alignment set by alignStart and alignEnd.

onTop : Attribute msg

 __________
|         |
|___  ____|
    \/

onBottom : Attribute msg

 ___/\_____
|         |
|_________|

onLeft : Attribute msg

  __________
 |         |
 |          >
 |_________|

onRight : Attribute msg

  __________
 |         |
<          |
 |_________|

alignStart : 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 : 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".

 __________
|______  _|
       \/

exactWidth : 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 : Float -> Attribute msg

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

onClick : (Bool -> msg) -> Attribute msg

The tooltip opens when clicking the root element, and closes when anything but the tooltip is clicked again.

onHover : (Bool -> msg) -> Attribute msg

The tooltip opens when hovering over the trigger element, and closes when the hover stops.

open : Bool -> Attribute msg

css : List Style -> Attribute msg

Set some custom styles on the tooltip. These will be treated as overrides, so be careful!

containerCss : List Style -> Attribute msg

custom : List (Attribute 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.

customTriggerAttributes : List (Attribute msg) -> Attribute msg

DEPRECATED -- a future release will remove this helper.

nriDescription : String -> Attribute msg

testId : String -> Attribute msg

primaryLabel : Attribute msg

Used when the content of the tooltip is the "primary label" for its content, for example, when the trigger content is an icon. The tooltip content will supercede the content of the trigger HTML for screen readers.

This is the default.

auxillaryDescription : Attribute msg

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

NoRedInk/noredink-ui/12.23.0

Nri.Ui.Tooltip.V2

Modules