Help Tooltips Input Group for React

TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.

Help, from its aria-label. The question-mark icon is aria-hidden.

type="email" with aria-label="Email address".

In an inline-end InputGroupAddon after the input.

An email input with a help button whose tooltip explains how the address is used.

Reassure people at the point of entry: a help button at the end of the email field opens a Tooltip that says We'll never share your email.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

TooltipTrigger renders the InputGroupButton through render, inside a TooltipProvider.

Help, from its aria-label. The question-mark icon is aria-hidden.

On hover and on keyboard focus of the button; Escape closes it.

Not by hover. For privacy notes people must see, put the sentence under the field as a description.

type="email" with aria-label="Email address".

In an inline-end InputGroupAddon after the input.