Nri.Ui.Tooltip.V1

A tooltip component!

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

Example usage:

    tooltip [ Html.text "Gradebook" ]
    |> withPadding SmallPadding
    |> withWidth FitToContent
    |> primaryLabel {
        trigger = OnClick
        , triggerHtml = someTriggerHtml
        , onTrigger = MyOnTriggerMsg
        , isOpen = True
        , extraButtonAttrs = modalV9LastFocusableElement
    }

Suggested Improvements for V2

The toggle tip does not currently manage focus correctly for keyboard users - if a user tries to click on a link in the toggle tip, the tip will disappear as focus moves to the next item in the page. This should be improved in the next release.
Currently, only toggle tip supports links on hover - generalize this to all tooltips

type Tooltip msg

A standard NoRedInk tooltip, which appears around its parent element.

Create versions of me with tooltip, and customize them with functions like withPosition and withTheme from this model. Like so:

tooltip [ Html.text "Hello, World!" ]
    |> withPosition OnLeft

type Position

= OnTop

| OnBottom

| OnLeft

| OnRight

Where should this tooltip be positioned?

withPosition : Position -> Tooltip msg -> Tooltip msg

Set a tooltip's position:

tooltip [ text "I'm on the left!" ]
    |> withPosition OnLeft

type Width

= Exactly Int

| FitToContent

Should the tooltip be exactly some measurement or fit to the width of the content?

withWidth : Width -> Tooltip msg -> Tooltip msg

Set the width of the tooltip itself.

type Padding

= SmallPadding

| NormalPadding

How much padding should be around the content inside the tooltip?

withPadding : Padding -> Tooltip msg -> Tooltip msg

Set the padding around the edges of the tooltip.

withTooltipStyleOverrides : List Style -> Tooltip msg -> Tooltip msg

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

type Trigger

= OnHover

| OnClick

How do you open this tooltip?

OnHover: the tooltip opens when hovering over the trigger element, and closes when the hover stops.
OnClick: the tooltip opens when clicking the root element, and closes when anything but the tooltip is clicked again.

Note: design typically prefers OnHover. However, if your tooltip has a link that someone needs to click, use OnClick because hover tooltips will currently close when you try to click the link.

FIXME: Make it so you can click on links in hover tooltips.

View Functions

primaryLabel :

{ trigger : Trigger

, triggerHtml : Html msg

, extraButtonAttrs : List (Attribute msg)

, onTrigger : Bool -> msg

, isOpen : Bool

, id : String

}

-> Tooltip msg

-> Html 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.

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

trigger: How do you open this tooltip?
triggerHtml: What element do you interact with to open the tooltip?
extraButtonAttrs: Adds attributes to the trigger button. Useful for things like focus management, like with Accessible Modal
onTrigger: What msg should I send when the tooltip should open and close? The Bool represents the next isOpen value.
isOpen: Is the tooltip open now? (keep track of this in your model somewhere)
id: A unique identifier used to associate the trigger with its content

auxillaryDescription :

{ trigger : Trigger

, triggerHtml : Html msg

, extraButtonAttrs : List (Attribute msg)

, onTrigger : Bool -> msg

, isOpen : Bool

, id : String

}

-> Tooltip msg

-> Html msg

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

toggleTip :

{ onTrigger : Bool -> msg

, isOpen : Bool

, label : String

, extraButtonAttrs : List (Attribute msg)

}

-> Tooltip msg

-> Html msg

Supplementary information triggered by a "?" icon

A toggle tip is always triggered by a hover (or focus, for keyboard users)

NoRedInk/noredink-ui/12.3.1

Nri.Ui.Tooltip.V1

Suggested Improvements for V2

Tooltip Construction

View Functions

Modules