Text Overflow Tooltip

Table of Contents

• Description
• Prerequisites
• Features
• Installation
• Usage
• Props
• Examples
• License

Description

TextOverflowTooltip is a lightweight React component library for displaying tooltips on text overflow. It shows a tooltip when the text overflows its container, providing a better user experience for handling long text strings.

Prerequisites

Make sure you're using below mentioned versions:

• Node.js: >= 16.0.0
• React: >= 17.0.0

Features:

• Overflowed tooltip (tooltip is visible on hover only if hovered element is overflowed.)
• Normal tooltip (tooltip is visible on hover)
• Show/Hide Arrow in tooltip
• Adjust tooltip position based on your needs (tooltipPosition prop)
• Adjust arrow position (arrowPosition prop)
• Follows WAI-ARIA standards

Installation

npm install text-overflow-tooltip

or

yarn add text-overflow-tooltip

Usage

1 . Import text-overflow-tooltip after installation.

import { Tooltip } from 'text-overflow-tooltip';

2 . Use Tooltip.

import { Tooltip } from 'text-overflow-tooltip';

const Demo = () => {
    return (
        <Tooltip title="You are checking how to use text-overflow-tooltip">
            {/* Overflowed text */}
            <div>You are checking how to use text-overflow-tooltip</div>
        </Tooltip>
    );
};

Props

Prop Name	Type	Default	Required	Description
title	React.ReactNode	-	true	React node element to display in tooltip
children	JSX.Element	-	true	Children element which triggers the tooltip on hover
arrow	boolean	false	false	To show / hide the tooltip arrow
tooltipPosition	TooltipPosition	"bottom"	false	Position of the tooltip. Options: "top", "bottom", "left", "right", "top-start", "bottom-start", "top-end", "bottom-end"
className	string	''	false	className to override style of tooltip
tooltipOnOverflow	boolean	true	false	Tooltip is visible when content is overflowed
arrowPosition	TooltipArrowPosition	"center"	false	Position of the arrow in tooltip. Works only if arrow prop is set to true. Options: "center", "left", "right"

Examples

Overflow Tooltip

import { Tooltip } from 'text-overflow-tooltip';

const Demo = () => {
    return (
        <Tooltip title="Tooltip title" tooltipOnOverflow={false}>
            {/* Overflowed text */}
            <div>You are checking how to use text-overflow-tooltip</div>
        </Tooltip>
    );
};

Normal Tooltip

import { Tooltip } from 'text-overflow-tooltip';

const Demo = () => {
    return (
        <Tooltip title="Tooltip Title" tooltipOnOverflow={false}>
            <div>Hover me</div>
        </Tooltip>
    );
};

Tooltip With Arrow

import { Tooltip } from 'text-overflow-tooltip';

const Demo = () => {
    return (
        <Tooltip title="Tooltip Title" tooltipOnOverflow={false} arrow={true}>
            <div>Hover me</div>
        </Tooltip>
    );
};

Tooltip Position

import { Tooltip } from 'text-overflow-tooltip';

const Demo = () => {
    return (
        <Tooltip title="Tooltip Title" tooltipOnOverflow={false} arrow={true} tooltipPosition="top">
            <div>Hover me</div>
        </Tooltip>
    );
};

Tooltip Arrow Position

import { Tooltip } from 'text-overflow-tooltip';

const Demo = () => {
    return (
        <Tooltip
            title="Tooltip Title"
            tooltipOnOverflow={false}
            arrow={true}
            tooltipPosition="top"
            arrowPosition="left"
        >
            <div>Hover me</div>
        </Tooltip>
    );
};

License

Apache