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.

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,
};

<!-- Small Tooltip -->
<plus-tooltip
  size="sm"
  message="This is a small tooltip"
  placement="top"
>
  <plus-button>Hover over me (small)</plus-button>
</plus-tooltip>  <!-- Small size -->

<!-- Medium Tooltip -->
<plus-tooltip
  size="md"
  message="This is a medium tooltip"
  placement="top"
>
  <plus-button>Hover over me (medium)</plus-button>
</plus-tooltip>  <!-- Medium size -->

<!-- Large Tooltip -->
<plus-tooltip
  size="lg"
  message="This is a large tooltip"
  placement="top"
>
  <plus-button>Hover over me (large)</plus-button>
</plus-tooltip>  <!-- Large size -->

<template>
  <!-- Small Tooltip -->
  <plus-tooltip
    size="sm"
    message="This is a small tooltip"
    placement="top"
  >
    <plus-button>Hover over me (small)</plus-button>
  </plus-tooltip>  <!-- Small size -->

  <!-- Medium Tooltip -->
  <plus-tooltip
    size="md"
    message="This is a medium tooltip"
    placement="top"
  >
    <plus-button>Hover over me (medium)</plus-button>
  </plus-tooltip>  <!-- Medium size -->

  <!-- Large Tooltip -->
  <plus-tooltip
    size="lg"
    message="This is a large tooltip"
    placement="top"
  >
    <plus-button>Hover over me (large)</plus-button>
  </plus-tooltip>  <!-- Large size -->
</template>

<!-- Small Tooltip -->
<plus-tooltip
  size="sm"
  message="This is a small tooltip"
  placement="top"
>
  <plus-button>Hover over me (small)</plus-button>
</plus-tooltip>  <!-- Small size -->

<!-- Medium Tooltip -->
<plus-tooltip
  size="md"
  message="This is a medium tooltip"
  placement="top"
>
  <plus-button>Hover over me (medium)</plus-button>
</plus-tooltip>  <!-- Medium size -->

<!-- Large Tooltip -->
<plus-tooltip
  size="lg"
  message="This is a large tooltip"
  placement="top"
>
  <plus-button>Hover over me (large)</plus-button>
</plus-tooltip>  <!-- Large size -->

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,
};

<!-- Tooltip with "Top" Placement -->
<plus-tooltip
  placement="top"
  message="This tooltip is placed at the top"
>
  <plus-button>Hover over me (top)</plus-button>
</plus-tooltip>

<!-- Tooltip with "Bottom" Placement -->
<plus-tooltip
  placement="bottom"
  message="This tooltip is placed at the bottom"
>
  <plus-button>Hover over me (bottom)</plus-button>
</plus-tooltip>

<template>
  <!-- Tooltip with "Top" Placement -->
  <plus-tooltip
    placement="top"
    message="This tooltip is placed at the top"
  >
    <plus-button>Hover over me (top)</plus-button>
  </plus-tooltip>

  <!-- Tooltip with "Bottom" Placement -->
  <plus-tooltip
    placement="bottom"
    message="This tooltip is placed at the bottom"
  >
    <plus-button>Hover over me (bottom)</plus-button>
  </plus-tooltip>
</template>

<!-- Tooltip with "Top" Placement -->
<plus-tooltip
  placement="top"
  message="This tooltip is placed at the top"
>
  <plus-button>Hover over me (top)</plus-button>
</plus-tooltip>

<!-- Tooltip with "Bottom" Placement -->
<plus-tooltip
  placement="bottom"
  message="This tooltip is placed at the bottom"
>
  <plus-button>Hover over me (bottom)</plus-button>
</plus-tooltip>

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.

Design System

API

PreviousToggle NextOverview

Last updated 6 months ago