Text Overflow Tip (TextTip)

⭐Star

TextTip is an intelligent component specifically designed for text display. When the text content exceeds the container width or a specified number of lines, it automatically displays an ellipsis and reveals the full content via Poptip (Bubble) or CursorTip (Following Tip) upon mouse hover.

Compared to the native title attribute, it offers richer visual styles, smarter positioning, and support for multi-line truncation.

Basic Usage

By default, TuiTextTip limits text to a single line. When the text exceeds the width of the parent container, it will automatically truncate and show an ellipsis. The full content is displayed after hovering for 1 second (default delay).

<template>
  <div style="width: 200px;">
    <TuiTextTip>
      This is a very long text used to test single-line overflow; hover to see more.
    </TuiTextTip>
  </div>
</template>

Multi-line Truncation

You can specify the maximum number of lines to display using the lines attribute. The component will automatically apply multi-line ellipsis styling.

<template>
  <div style="width: 300px;">
    <TuiTextTip :lines="3">
      This is a Chinese text used for testing. We hope this text contains various common characters, punctuation marks, and numbers to ensure correct display in different environments. At the same time, we hope this text has a certain length to test automatic line wrapping and scrolling effects.
    </TuiTextTip>
  </div>
</template>

Tip Appearance

The component reuses the underlying capabilities of Poptip and CursorTip, allowing you to switch between two interaction modes via the appearance attribute:

• poptip (default): A fixed-position bubble tip, usually located above or below the text.
• curtip: A tip that follows the mouse cursor, suitable for exploratory interaction when reading long paragraphs.

<script setup>
import { reactive } from 'vue'
const config = reactive({
  mode: 'poptip'
})
</script>

<template>
  <TuiTextTip appearance="poptip" placement="bottom">
    Standard Poptip mode with a fixed position.
  </TuiTextTip>

  <TuiTextTip appearance="curtip" placement="bottom-end">
    Curtip mode where the tip follows the mouse, providing a more dynamic experience.
  </TuiTextTip>
</template>

Visual Styles

It supports the same type (semantic color), tone (color intensity), and frosted glass effect configurations as Poptip.

Tip: The default delay is set to 1000ms to prevent frequent pop-up triggers when users quickly scroll through a list, thereby reducing visual interference.

<template>
  <TuiTextTip 
    type="invert" 
    tone="strong" 
    :transparent="true" 
    :backgroundBlur="true"
  >
    This is an important piece of text information...
  </TuiTextTip>

  <TuiTextTip type="danger">
    Error log info: NullPointerExce...
  </TuiTextTip>
</template>

API Reference

Props

Property	Description	Type	Default
lines	Number of lines to display. null or 1 for single-line truncation; greater than 1 for multi-line truncation	Number	null
appearance	Tip appearance mode, options: 'poptip', 'curtip'	String	'poptip'
delay	Display delay (ms). Defaults to 1s to avoid frequent flickering	Number	1000
type	Semantic type, options: 'default', 'invert', 'primary', 'danger', etc.	String	'invert'
tone	Tone intensity, options: 'base', 'weak', 'strong', 'strongInvert', etc.	String	'base'
placement	Popup position. Poptip defaults to bottom, Curtip defaults to bottom-start	String	—
maxWidth	Maximum width of the tip box (px)	Number	—
offset	Tip box offset (px)	Number	—
transparent	Whether to enable background transparency	Boolean	true
backgroundBlur	Whether to enable background blur	Boolean	true
fadeAni	Whether to enable fade-in/fade-out animation	Boolean	false

Slots

Slot Name	Description
default	The text content to be displayed

Global Interaction

Because TuiTextTip encapsulates Poptip and CursorTip, it fully inherits the underlying characteristics of these two components:

• Global ESC Monitoring: The component is managed by TechUI global services. When a user presses the Esc key, the currently displayed text tip is immediately destroyed, providing a consistent quick-close experience.
• Intelligent Positioning (Floating UI): The positioning logic of the tip box is entirely based on Floating UI. Regardless of whether the text is at the edge of the page or within a complex scrolling container, the component automatically performs collision detection and position correction to ensure tip content is never truncated by the viewport.