Plus UI ↗️ Be Our Sponsor ↗️

Tooltip

Tooltip Component: Unveil Hidden Insights with a Hover

The Tooltip Component is a designed to enhance user experience by providing contextual information or hints when users hover over, focus on, or tap an element. It's an invaluable asset for creating intuitive interfaces, offering additional details without cluttering the UI. Perfect for both desktop and mobile applications, tooltips help in guiding users through your application with ease and precision.

Anatomy

The anatomy of the Tooltip Component is meticulously crafted to ensure a seamless integration with any UI element. It consists of a lightweight description, container and tip that dynamically positions itself around the target element based on the specified orientation. Inside, the content is neatly displayed, offering clarity and focus. The component's design is flexible, allowing it to adapt to various sizes and orientations to fit the content and context perfectly.

Properties

The Tooltip Component comes packed with customizable properties to ensure it fits your specific needs. Key properties include size, allowing for small, medium, or large tooltips; and orientation, which determines the tooltip's positioning relative to the target element. These properties provide the flexibility needed to create a tooltip that aligns perfectly with your design and usability requirements.

SizeOrientation

Small

Left

Medium

Right

Large

Top

Bottom

Size

  • Small: A compact option best suited for short, succinct pieces of text or icons. This size ensures that the tooltip is unobtrusive yet readable.

  • Medium: This is the standard size, offering a balanced option that is large enough to hold a moderate amount of text while maintaining a neat appearance.

  • Large: Designed for tooltips that need to convey more detailed information or longer text. The large size provides ample space, ensuring content is easy to read without crowding.

import React from 'react';
import { PlusTooltip, PlusButton } from '@plusui/react';

// Small Tooltip
const SmallTooltip = () => (
  <PlusTooltip size="sm" message="This is a small tooltip" placement="top">
    <PlusButton>Hover over me (small)</PlusButton>
  </PlusTooltip>
);

// Medium Tooltip
const MediumTooltip = () => (
  <PlusTooltip size="md" message="This is a medium tooltip" placement="top">
    <PlusButton>Hover over me (medium)</PlusButton>
  </PlusTooltip>
);

// Large Tooltip
const LargeTooltip = () => (
  <PlusTooltip size="lg" message="This is a large tooltip" placement="top">
    <PlusButton>Hover over me (large)</PlusButton>
  </PlusTooltip>
);

export default {
  SmallTooltip,
  MediumTooltip,
  LargeTooltip,
};

Orientation

  • Left: Display the tooltip to the left of the target, with variations in vertical alignment. Perfect for right-aligned elements or when horizontal space is limited on the right.

  • Right: Position the tooltip to the right of the target, with options for vertical alignment. Best suited for left-aligned elements or when additional context is needed without obstructing content to the left.

  • Top: Position the tooltip above the target element, with the ability to align it to the middle, right, or left, respectively. Ideal for elements located towards the bottom of the viewport or when vertical space is plentiful.

  • Bottom: Position the tooltip below the target element, with alignment options similar to the above, suited for elements at the top of the viewport or when you wish to draw attention downwards.

import React from 'react';
import { PlusTooltip, PlusButton } from '@plusui/react';

// Tooltip with "Top" Placement
const TooltipTopPlacement = () => (
  <PlusTooltip placement="top" message="This tooltip is placed at the top">
    <PlusButton>Hover over me (top)</PlusButton>
  </PlusTooltip>
);

// Tooltip with "Bottom" Placement
const TooltipBottomPlacement = () => (
  <PlusTooltip placement="bottom" message="This tooltip is placed at the bottom">
    <PlusButton>Hover over me (bottom)</PlusButton>
  </PlusTooltip>
);

export default {
  TooltipTopPlacement,
  TooltipBottomPlacement,
};

Layout & Spacing

Adequate padding around the text prevents crowding, while the tooltip's offset from the target element is carefully calculated to avoid overlap, ensuring that both the tooltip and the element remain distinctly visible and unobstructed.

Light & Dark Mode

The Tooltip Component is fully equipped to seamlessly transition between light and dark modes, ensuring consistency and readability across different themes. Whether your application prefers a light, airy feel or a dark, sophisticated look, the tooltip adapts its color scheme accordingly, providing an optimal viewing experience in any lighting condition.

Accessibility

Accessibility is a cornerstone of the Tooltip Component's design, ensuring that all users, including those with disabilities, can fully benefit from the information it provides. It supports keyboard navigation and is ARIA-compliant, making sure that screen readers can accurately convey the tooltip's content. This commitment to accessibility helps in creating a more inclusive and user-friendly application environment.

CriteriaDescriptionStatus

ARIA Attributes

Ensures ARIA attributes are allowed for an element's role

Passed

ARIA Role

Ensures role attribute has an appropriate value for the element

Passed

ARIA Hidden Elements

Ensures aria-hidden elements are not focusable nor contain focusable elements

Passed

Color Contrast

Ensures the contrast between foreground and background colors meets WCAG 2 AA 
contrast ratio thresholds.

AA ~ AAA

Design System

API

PropertyDescriptionTypeAccepted ValuesDefault

size

Sets the size of the tooltip

String

sm, md, lg

md

placement

Determines the tooltip's position relative to the element

String

top, bottom, left, right, top-start, top-end, bottom-start, bottom-end, left-start, left-end, right-start, right-end

top

showArrow

If true, shows an arrow pointing toward the element

Boolean

true, false

true

message

The message displayed inside the tooltip

String

Any valid text

null

trigger

Specifies what triggers the tooltip

String

hover, focus, click, manual

hover focus

PreviousToggleNextOverview

Last updated