Poptip

Poptip is a lightweight text prompt component primarily used to explain the meaning of interface elements (such as buttons or text) or to provide brief auxiliary information. Compared to Popinfo, it has a smaller footprint, contains no title, features a more compact visual style, and its interaction logic leans toward "point-and-display."

Basic Usage

Component Call

The most standard way to use it is by wrapping the <TuiPoptip> component around the trigger element. Use the content attribute to define the tip text.

<template>
  <div class="demo-box">
    <TuiPoptip content="This is a basic tip">
      <TuiButton>Hover Me</TuiButton>
    </TuiPoptip>

    <TuiPoptip 
      content="Danger Type / Bottom" 
      type="danger" 
      placement="bottom"
    >
      <TuiButton type="danger">Delete</TuiButton>
    </TuiPoptip>
  </div>
</template>

Directive Call

Using the v-tui-popover directive can reduce nesting levels by binding the tip directly to the target element.

Tip: The default appearance for directive calls is 'poptip', so there is no need to explicitly specify the appearance as you would with Popinfo.

<template>
  <TuiButton 
    v-tui-popover="{ 
      content: 'Poptip displayed via directive', 
      placement: 'right',
      type: 'primary' 
    }"
  >
    Directive Trigger
  </TuiButton>
</template>

Visual Styles

Poptip supports the same rich variety of color and tone combinations as Popinfo to adapt to various background depths and semantic scenarios.

Type Semantic Color and Tone

Define semantic colors via type and control tone intensity with tone.

<template>
  <div class="row">
    <TuiPoptip content="Primary Type" type="primary">
      <TuiButton type="primary">Primary</TuiButton>
    </TuiPoptip>

    <TuiPoptip content="Strong Tone" type="success" tone="strong">
      <TuiButton type="success">Success Strong</TuiButton>
    </TuiPoptip>
    
    <TuiPoptip content="Invert Tone" type="warning" tone="strongInvert">
      <TuiButton type="warning">Warning Invert</TuiButton>
    </TuiPoptip>
  </div>
</template>

Frosted Glass Effect

Enabling transparent and backgroundBlur creates a translucent effect with background blur. This usually works best with tone="weak" to present a refined visual texture.

<template>
  <TuiPoptip 
    content="Glass Effect Poptip" 
    :transparent="true" 
    :backgroundBlur="true"
    tone="weak"
  >
    <TuiButton>Frosted Effect</TuiButton>
  </TuiPoptip>
</template>

Functional Call

In scenarios where DOM binding is not possible (such as Canvas drawing areas, interactions within chart elements, or asynchronous operation feedback), you can use the globally injected $tPopover method to manually trigger the tip.

<script setup>
import { inject } from 'vue'

const $tPopover = inject('$tPopover')

const openManualPoptip = (event) => {
  $tPopover({
    event: event, // Must pass the event object or target DOM for position calculation
    // appearance: 'poptip', // Defaults to poptip, can be omitted
    content: 'This is a Poptip called dynamically via JS',
    type: 'info',
    trigger: 'click', // Functional calls usually pair with click or manual logic
    showTrigger: true // Displays the click ripple animation
  })
}
</script>

<template>
  <div class="manual-area" @click="openManualPoptip">
    Click this area to trigger functional Poptip
  </div>
</template>

API Reference

Props

Property	Description	Type	Optional Values (Full List)	Default
content	Tip content	String	—	—
placement	Popup position	String	'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'	'top'
type	Semantic type	String	'default', 'invert', 'primary', 'success', 'warning', 'danger', 'info', 'emphasis'	null
tone	Tone intensity	String	'base', 'weak', 'strong', 'strongInvert', 'extremeInvert'	'base'
shadowColor	Shadow intensity	String	'weakest', 'weaker', 'weak', 'base', 'strong', 'stronger', 'strongest', 'match'	'weak'
trigger	Trigger method	String	'hover', 'click'	'hover'
appearance	Appearance mode (for directive/functional calls)	String	'poptip', 'popinfo'	'poptip'
offset	Offset distance (px)	Number	—	8
showArrow	Whether to show arrow	Boolean	—	true
enterable	Whether the mouse can enter the tip interior	Boolean	—	false
autoClose	Whether to close automatically when clicking outside	Boolean	—	true
transparent	Whether to enable background transparency	Boolean	—	true
backgroundBlur	Whether to enable background blur	Boolean	—	true
disabled	Whether it is disabled	Boolean	—	false
delay	Display delay (ms)	Number	—	500
duration	Auto-close time (ms), 0 for persistent	Number	0 (persistent) or specific milliseconds	3000
hasShadow	Whether to display shadow	Boolean	—	true

Slots (Component Mode)

Slot Name	Description
default	Target element to trigger the tip

Global Methods

Method Name	Description	Parameters
$tPopover	Creates a Poptip instance	(options: Object) => void
$tPopoverCloseAll	Closes all instances created via JS/events	() => void
$tPopoverDirectiveCloseAll	Closes all instances created via directives	() => void

Global ESC Monitoring

To provide a unified and elegant keyboard interaction experience, all floating components are deeply integrated with TechUI's global service (TuiService).

The component internally listens to the global EscCounter parameter in real-time. When the user presses the Esc key, the global service updates this counter, and the component, catching this change, automatically triggers the hide logic. This mechanism ensures that no matter how many independent floating layers are on the page, they all respond to a unified close command without the developer needing to manually bind keyboard events.

Positioning Dependencies

TechUI's bubble and popup components rely entirely on the industry-standard Floating UI library for anchor positioning calculations.

This means you do not need to worry about complex geometric calculations; the component automatically handles the following scenarios:

• Collision Detection (Flip): Automatically flips to the opposite position when the preset position has insufficient space (such as at the edge of the screen).
• Viewport Correction (Shift): Ensures the bubble always stays within the visible range of the viewport and is not truncated.
• Precise Offset: Achieves pixel-level precise positioning through the offset property.

You simply specify the desired orientation via the component's placement property, and the remaining complex calculations are handled automatically by the underlying engine.