Tooltip

Tooltips are used to provide additional information when users hover over, focus on, or tap an element.

Overview

Usage

When to use this component?

Tooltips are used to provide contextual information or explanations about an element when users interact with it. They are ideal for offering hints, definitions, or additional details that may not be immediately visible, enhancing the user experience by providing on-demand assistance without adding clutter to the interface.

How it works

A tooltip component appears as a small box with text when a user hovers over, focuses on, or taps an element. It typically displays a brief description or hint related to the element. Tooltips can be positioned in various directions relative to the element and may include headers for structured information when needed.

Code

Vanilla Js

<dda-tooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    ><!---->
    <button>Hover me</button>
</dda-tooltip>

React

      <DdaTooltip
            title_text="Tooltip"
            description="This is a tooltip description."
            position="top"
            custom_class=""
            component_mode=""
            >
            <button>Hover me</button>
        </DdaTooltip>

Vue

    <DdaTooltip
            title_text="Tooltip"
            description="This is a tooltip description."
            position="top"
            custom_class=""
            component_mode=""
            >
            <button>Hover me</button>
        </DdaTooltip>

Angular

<dda-tooltip
    title_text="Tooltip"
    description="This is a tooltip description."
    position="top"
    custom_class=""
    component_mode=""
    >
    <button>Hover me</button>
</dda-tooltip>

Properties

Property	Description	Type
component_mode	Can be used to apply specific styles or behavior to the tooltip based on different UI modes. Example: Light mode, dark mode, or any other custom mode that affects appearance.	string
custom_class	Allows adding a custom CSS class to the tooltip container for additional styling.	string
description	A brief explanatory text shown inside the tooltip along with the title.	string
position	Determines where the tooltip appears relative to the element it is attached to. 'top': Tooltip appears above the element. 'bottom': Tooltip appears below the element. 'left': Tooltip appears to the left of the element. 'right': Tooltip appears to the right of the element.	"bottom" | "left" | "right" | "top"
title_text	The title of the tooltip that appears when the user hovers over the component. It is displayed in bold.	string

Anatomy

Anatomy Options

Label: The text or content inside the tooltip that provides information or guidance to the user.

Container: The box that surrounds the label, giving it a distinct background to stand out from the rest of the interface.

Pointer: A small triangular element that visually links the tooltip container to the element it describes or provides context for.

Dos and Don'ts

Dos	Don'ts
Use tooltips to provide additional information or context.	Don't use tooltips for essential information that must always be visible.
Keep tooltip text concise and to the point.	Avoid long paragraphs or overly detailed information in tooltips.
Ensure tooltips are easily visible and readable.	Don't place tooltips in positions where they might be obscured or difficult to see.
Use consistent styling for all tooltips in the application.	Don't use inconsistent styles that may confuse users.
Provide clear visual indicators for elements that have tooltips.	Don't leave users guessing whether an element has a tooltip or not.
Ensure tooltips are accessible via keyboard navigation.	Don't make tooltips accessible only via mouse interactions.