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

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.

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

Provide a plain-text string.

Provide a string that will be rendered as markdown.

Provide a list of custom HTML.

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

 __________
|         |
|___  ____|
    \/

 ___/\_____
|         |
|_________|

  __________
 |         |
 |          >
 |_________|

  __________
 |         |
<          |
 |_________|

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

 __________
|         |
|___  ____|
    \/

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

 ___/\_____
|         |
|_________|

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

  __________
 |         |
 |          >
 |_________|

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

  __________
 |         |
<          |
 |_________|

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

 __________
|         |
|___  ____|
    \/

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

 ___/\_____
|         |
|_________|

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

  __________
 |         |
 |          >
 |_________|

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

  __________
 |         |
<          |
 |_________|

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

 __________
|         |
|___  ____|
    \/

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

 ___/\_____
|         |
|_________|

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

  __________
 |         |
 |          >
 |_________|

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

  __________
 |         |
<          |
 |_________|

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

 __________
|_  ______|
  \/

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

 __________
|___  ____|
    \/

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

 __________
|______  _|
       \/

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

 __________
|_  ______|
  \/

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

 __________
|___  ____|
    \/

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

 __________
|______  _|
       \/

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

 __________
|_  ______|
  \/

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

 __________
|___  ____|
    \/

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

 __________
|______  _|
       \/

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

 __________
|_  ______|
  \/

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

 __________
|___  ____|
    \/

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

 __________
|______  _|
       \/

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

Tooltip width fits its content.

This the default spacing.

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

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.

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

Set some custom styles on the tooltip.

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 ]

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 ]

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 ]

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 ]

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.

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.

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.

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:

• any focusable elements in the disclosed content to be keyboard accessible
• the disclosure to close appropriately when the user tabs past all of the disclosed content

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