Documentation
Webframe UI
Components
Tooltip

Tooltip

Tooltips display additional information (text, images, or explanations), when users hover over, focus on, click or tap an element.

Tooltip content can be text, or custom UI, which renders inside a popup that appears on user interaction with the element.

Props

PropTypeDefaultDescription
children
String
|
Number
|
Boolean
|
Function
Required

Tooltip content

on
Enum
|
Array
['focus', 'hover']

One of, or any combination of ['click', 'focus', 'hover']

position
Enum
'top'

Location of the Tooltip relative to the parent element

align
Enum

Tooltip alignment relative to the position, default is center/middle alignment.

For position 'top'/'bottom':
'start' is left
'end' is right

For position 'left'/'right':
'start' is top
'end' is bottom
animation
String
'fade-in'

Animation CSS class to apply

delay
Millisecond
1000

Popup delay duration in milliseconds

embedded
Boolean

Whether to render Tooltip as child element of the parent Node, by default it renders as Portal

offset
Px
16

Tooltip pointer offset from the parent element, default is 16

openInitially
Boolean

Whether to show Tooltip initially

onOpen
Function

Handler(event, self: object) => void - before Tooltip opens

onClose
Function

Handler(event, self: object) => void - before Tooltip closes

onMount
Function

Callback(self: object) => void - when Tooltip container has mounted

theme
String
'dark'

Name of the theme mode to apply - must be one of the available theme styles.

Example: inverted, light, dark, glass, etc.

tooltipClass
Class Name

Class name for the Tooltip container

Examples

Basic Usage

Default Tooltip
As `tooltip` property of `Button`

Custom Behaviors

Show Tooltip initially
Appear on element `focus` only
Appear on element `hover` only
🚨

Todo: sync Tooltip position on scroll.

Open or close popup on `click`
Render Tooltip inside parent node

Position & Alignment

Tooltip Position
Aligning within Position

Styling Tooltip

Tooltip adopts to content size by default
Customize Tooltip with `className` or `style`

Glass Effect

To enable the slick frosty glass effect, use the glass theme.

Example

Note: the popup may close when the cursor is outside the element because of browser quirks related to CSS 'backdrop-filter'. To persist tooltip when the cursor moves over, remove the gap between it and the parent element.

Hoverable Glass Theme Tooltip

Unique Features

1. Intuitive Code Markup

Webframe Tooltip inserts itself as a child of any component that needs popover, instead of wrapping the element like most UI libraries. The benefits of this is that you can have:

  • Multiple tooltips for the same element without JSX nesting nightmare
  • Markup that aligns with human thinking, see code examples for reference.

2. Render Modes

  • Detached - by default, Tooltip renders inside a React Portal, as direct child of the document body, to ensure correct positioning for most use cases.
  • Embedded - Tooltip with embedded set to true renders inside the parent node with correct event bubbling and keyboard accessibility. This is great for UX, like nested dropdown menus.

3. Weights 1kB gzipped

This is in contrast to similar components using react-popper, like Material UI Popper, which weights 24.9kB gzipped (at the moment of this writing).

TextView