Tooltip

Introduction

A tooltip is a lightweight popover for showing additional information during hover interactions.

A single target can be wrapped in both a popover and a tooltip.

You must put the Tooltip inside the Popover (and the target inside the Tooltip), so the final hierarchy is Popover > Tooltip > target This order is required because the popover will disable the tooltip when it is open, preventing both elements from appearing at the same time.

Examples

Hover and click meOr, hover anywhere over this whole line.Hover and leave to close with delay

Usage

Tooltip with Popover

import React from "react";
import { Button, Popover, Position, Tooltip } from "@commure/components-foundation";
function MyTooltip() {
return (
<Popover content={<h1>Popover!</h1>} position={Position.RIGHT}>
<Tooltip content="I has a popover!" position={Position.RIGHT}>
<AnchorButton>Hover and click me</AnchorButton>
</Tooltip>
</Popover>
);
}
export default MyTooltip;

API Reference

Tooltip simply passes its props to Popover, with some exceptions. Notably, it only supports HOVER interactions and the target prop is not supported.

When creating a tooltip, you must specify both:

  • its content via the content prop, and
  • its target as a single child element or string.

The content will appear in a contrasting popover when the target is hovered.

Tooltip

Prop NameRequired?TypeDescription
autoFocusfalsebooleanWhether the overlay should acquire application focus when it first opens.
boundaryfalsePopperBoundaryDetermines the boundary element used by Popper for its `flip` and `preventOverflow` modifiers. Three shorthand keywords are supported; Popper will find the correct DOM element itself.
canEscapeKeyClosefalsebooleanWhether pressing the `esc` key should invoke `onClose`.
captureDismissfalsebooleanWhen enabled, `preventDefault()` is invoked on `click` events that close this popover, which will prevent those clicks from closing outer popovers. When disabled, clicking inside a `Classes.POPOVER_DISMISS` element will close the parent popover. See http://blueprintjs.com/docs/#core/components/popover.closing-on-click
classNamefalsestringA space-delimited list of class names to pass along to a child element.
contenttrueElement | stringThe content that will be displayed inside of the tooltip.
defaultIsOpenfalsebooleanInitial opened state when uncontrolled.
disabledfalsebooleanPrevents the popover from appearing when `true`.
enforceFocusfalsebooleanWhether the overlay should prevent focus from leaving itself. That is, if the user attempts to focus an element outside the overlay and this prop is enabled, then the overlay will immediately bring focus back to itself. If you are nesting overlay components, either disable this prop on the "outermost" overlays or mark the nested ones `usePortal={false}`.
hoverCloseDelayfalsenumberThe amount of time in milliseconds the tooltip should remain open after the user hovers off the trigger. The timer is canceled if the user mouses over the target before it expires.
hoverOpenDelayfalsenumberThe amount of time in milliseconds the tooltip should wait before opening after the user hovers over the trigger. The timer is canceled if the user mouses away from the target before it expires.
inheritDarkThemefalsebooleanWhether a popover that uses a `Portal` should automatically inherit the dark theme from its parent.
intentfalseIntentVisual intent color to apply to element.
interactionKindfalse"hover" | "hover-target"The kind of hover interaction that triggers the display of the tooltip. Tooltips do not support click interactions.
isOpenfalsebooleanWhether the popover is visible. Passing this prop puts the popover in controlled mode, where the only way to change visibility is by updating this property. If `disabled={true}`, this prop will be ignored, and the popover will remain closed.
lazyfalsebooleanIf `true` and `usePortal={true}`, the `Portal` containing the children is created and attached to the DOM when the overlay is opened for the first time; otherwise this happens when the component mounts. Lazy mounting provides noticeable performance improvements if you have lots of overlays at once, such as on each row of a table.
modifiersfalsePopperModifiersPopper modifier options, passed directly to internal Popper instance. See https://popper.js.org/popper-documentation.html#modifiers for complete details.
onClosefalse(event?: SyntheticEvent<HTMLElement>) => voidA callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the `esc` key (if enabled). Receives the event from the user's interaction, if there was an event (generally either a mouse or key event). Note that, since this component is controlled by the `isOpen` prop, it will not actually close itself until that prop becomes `false`.
onClosedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _close_ transition ends but before the child has been removed from the DOM. Receives the DOM element of the child being closed.
onClosingfalse(node: HTMLElement) => voidLifecycle method invoked just before the CSS _close_ transition begins on a child. Receives the DOM element of the child being closed.
onInteractionfalse(nextOpenState: boolean, e?: SyntheticEvent<HTMLElement>) => voidCallback invoked in controlled mode when the popover open state *would* change due to user interaction.
onOpenedfalse(node: HTMLElement) => voidLifecycle method invoked just after the CSS _open_ transition ends. Receives the DOM element of the child being opened.
onOpeningfalse(node: HTMLElement) => voidLifecycle method invoked just after mounting the child in the DOM but just before the CSS _open_ transition begins. Receives the DOM element of the child being opened.
openOnTargetFocusfalsebooleanWhether the popover should open when its target is focused. If `true`, target will render with `tabindex="0"` to make it focusable via keyboard navigation.
popoverClassNamefalsestringA space-delimited string of class names applied to the popover element.
portalClassNamefalsestringSpace-delimited string of class names applied to the `Portal` element if `usePortal={true}`.
portalContainerfalseHTMLElementThe container element into which the overlay renders its contents, when `usePortal` is `true`. This prop is ignored if `usePortal` is `false`.
positionfalsePopoverPositionThe position (relative to the target) at which the popover should appear. The default value of `"auto"` will choose the best position when opened and will allow the popover to reposition itself to remain onscreen as the user scrolls around.
targetClassNamefalsestringSpace-delimited string of class names applied to the target element.
targetPropsfalseHTMLAttributes<HTMLElement>HTML props to spread to target element. Use `targetTagName` to change the type of element rendered. Note that `ref` is not supported.
targetTagNamefalsekeyof IntrinsicElementsHTML tag name for the target element. This must be an HTML element to ensure that it supports the necessary DOM event handlers. By default, a `<span>` tag is used so popovers appear as inline-block elements and can be nested in text. Use `<div>` tag for a block element.
transitionDurationfalsenumberIndicates how long (in milliseconds) the tooltip's appear/disappear transition takes. This is used by React `CSSTransition` to know when a transition completes and must match the duration of the animation in CSS. Only set this prop if you override Blueprint's default transitions with new transitions of a different length.
usePortalfalsebooleanWhether the popover should be rendered inside a `Portal` attached to `portalContainer` prop. Rendering content inside a `Portal` allows the popover content to escape the physical bounds of its parent while still being positioned correctly relative to its target. Using a `Portal` is necessary if any ancestor of the target hides overflow or uses very complex positioning. Not using a `Portal` can result in smoother performance when scrolling and allows the popover content to inherit CSS styles from surrounding elements, but it remains subject to the overflow bounds of its ancestors.
wrapperTagNamefalsekeyof IntrinsicElementsHTML tag name for the wrapper element, which also receives the `className` prop.

Related Reading

Blueprint Tooltip Reference
Blueprint Popover Reference
Blueprint AnchorButton Reference