Tooltip

import { AXTooltipModule } from '@acorex/components/tooltip';

Tooltip component is a small, interactive popup that appears when a user hovers over or clicks on an element. It provides additional information or context, such as descriptions, tips, or hints, without cluttering the interface, offering a more intuitive user experience.

Overview

In this section, you can test different options of this component and see the output in real time

Position

Top

Usage

A simple example of using [axTooltip]

Preview

Code

Custom Template

Description of AXTooltipComponent's feature.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-tooltip-bg-color	var(--ax-sys-color-dark)	defines the background color of the tooltip component. It ensures the tooltip has a visually distinct backdrop, improving readability and contrast against surrounding elements.
--ax-comp-tooltip-text-color	var(--ax-sys-color-light)	this variable specifies the color of the text displayed within the tooltip component. It ensures the text is legible and provides sufficient contrast against the tooltip's background color.
--ax-comp-tooltip-border-radius	0.25rem	defines the border radius of the tooltip component. It determines the roundness of the tooltip's corners, contributing to its visual style and design consistency.