rc-tc-ifn

💬 rc-tc-ifn

LIVE EXAMPLE

Smart truncate + tooltip component for React 18+.
Built on top of react-tooltip-z.

Automatically truncates text with ellipsis only when needed and shows tooltip when content overflows.

Why rc-tc-ifn?

• ✂️ Auto truncate with text-overflow: ellipsis
• 🧠 Tooltip shows only if content overflows
• 🎯 Zero manual overflow checking
• 📦 Lightweight wrapper
• 🪟 Portal-based tooltip (via react-tooltip-z)
• 🎨 Fully customizable tooltip props
• ⚡ React 18+ ready

Perfect for:

• Table cells
• Dropdown lists
• Select menus
• Data grids
• Compact UI layouts

Installation

npm install rc-tc-ifn

Basic Usage

import TooltipIfn from "rc-tc-ifn";

export function Example() {
  return (
    <TooltipIfn width={120} placement="right">
      Very long content here that might overflow
    </TooltipIfn>
  );
}

If the content exceeds 120px → it will truncate and show tooltip.
If not → it renders normally (no tooltip).

Custom Content

<TooltipIfn
  width="150px"
  content="Custom tooltip content"
  placement="top"
>
  Long text here...
</TooltipIfn>

Props

All tooltip-related props are inherited from react-tooltip-z
(except trigger and open, which are internally controlled).

Prop	Type	Default	Description
children	ReactNode	—	Target element
content	string | ReactNode	children	Tooltip content
width	string | number	—	Width applied to truncated child
wrapperWidth	string | number	—	Width applied to wrapper
tagName	string	"span"	Wrapper tag
truncateClassName	string	—	Custom class for truncated element
...rest	any	—	Forwarded to react-tooltip-z props

Behavior Notes

• Tooltip only appears when content overflows.
• No CSS import required (CSS injected via JS).
• trigger and open props are disabled (hover-only behavior).
• Child element must accept ref (DOM or forwardRef component).

Comparison

Criteria	rc-tc-ifn	Manual Implementation
Smart overflow check	✅	❌
Tooltip only if needed	✅	❌
Portal support	✅	⚠️
API simplicity	✅	❌
Setup time	✅	❌

Notes

• ✅ Built-in overflow detection — no extra logic required
• ✅ Tooltip renders only when necessary — avoids unnecessary DOM updates
• ✅ Portal support included — better layering & positioning
• ⚠️ Manual approach may support portal, but requires custom setup
• ❌ Manual implementation requires repetitive boilerplate and edge-case handling

License

MIT