Aios Design System

Tooltips provide users with contextual information and guidance when they hover over or focus on a particular component.

Supplementary Information: Use tooltips to provide additional information or clarify the function of a component, especially when the component label or icon alone might not be sufficient.
Content Overflow: For content that is too long to fit within its container and gets an ellipsis, use tooltips to display the full content on hover (only when text is trunctuated).
Unique Text: The tooltip text should not be identical to the component label unless the component does not have a visible label.
Icon-only Components: Essential for icon-only components to explain their purpose and ensure users understand their function.
Delay and Duration: Tooltips should appear after a short delay when the user hovers over a component and disappear once the user moves the cursor away. Tooltips should not appear if the user merely passes over the component without stopping.
- Appearance Timing: A common rule of thumb is to have a delay of about 500 milliseconds (0.5 seconds). This prevents tooltips from popping up immediately as the user moves the cursor across the screen.
- ~~Persistent Display:~~
  
  ~~If the user moves the cursor to the tooltip itself, it should remain visible until the cursor leaves the tooltip area.~~
- Dissapearance Timing: Tooltips should disappear immediately once the user moves the cursor away from the component, ensuring that the interface remains clean and that tooltips do not obstruct other UI elements

                
/*TOOLTIPS*/  

    .tippy-box[data-theme~='customrightleft'],
    .tippy-box[data-theme~='customtopbottom'] {
        background-color: var(--Grey-xd);
        color: #fff;
        font-size: 12px;
        font-family: var(--base-font-family);
    }

    .tippy-box[data-theme~='customrightleft'] > .tippy-arrow::before {
        border-right-color: var(--Grey-xd);
        border-left-color: var(--Grey-xd);
    }

    .tippy-box[data-theme~='customtopbottom'] > .tippy-arrow::before {
        border-top-color: var(--Grey-xd);
        border-bottom-color: var(--Grey-xd);
    }

                
tippy('#tooltipTopBottom', {
    placement: 'top',
    animation: 'fade',
    theme: 'customtopbottom',
    delay: [500, 0],
    duration: 200, 
    arrow: true,
    interactive: true, 
    interactiveBorder: 10, 
});

tippy('#tooltipRightBottom', {
    placement: 'right',
    animation: 'fade',
    theme: 'customrightleft',
    delay: [500, 0],
    duration: 200, 
    arrow: true,
    interactive: true, 
    interactiveBorder: 10, 
});

tippy('#tooltipBottomBottom', {
    placement: 'bottom',
    animation: 'fade',
    theme: 'customtopbottom',
    delay: [500, 0],
    duration: 200, 
    arrow: true,
    interactive: true, 
    interactiveBorder: 10, 
});

tippy('#tooltipLeftBottom', {
    placement: 'left',
    animation: 'fade',
    theme: 'customrightleft',
    delay: [500, 0],
    duration: 200, 
    arrow: true,
    interactive: true, 
    interactiveBorder: 10, 
});

Tooltips

Button Examples

Overflowing Text Examples

CSS Properties

Typescript