Text Overflow Tooltip

Table of Contents

• Description
• 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.

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