Other Directives

Apart from the two independent interaction directives Drag and Resize, TechUI also provides shortcut directive versions for frequently used overlay components.

Using these directives, you can directly bind interaction behaviors to existing DOM elements without changing the HTML structure to nest components.

These directives are mentioned in their corresponding component documentation, so they are collected in this single document and will not be introduced in separate chapters.

Popover

Used to quickly invoke Poptip (Text Tip) or Popinfo (Info Card).

It is a directive encapsulation of the TuiPoptip and TuiPopinfo components, switching forms via the appearance property.

Basic Usage

<template>
  <div class="row">
    <TuiButton 
      v-tui-popover="{ 
        content: 'This is a basic tip', 
        placement: 'top',
        type: 'primary'
      }"
    >
      Text Tip
    </TuiButton>

    <TuiButton 
      v-tui-popover="{ 
        appearance: 'popinfo',
        title: 'Details', 
        content: 'This is card content containing a title.', 
        trigger: 'click' 
      }"
    >
      Card Tip
    </TuiButton>
  </div>
</template>

For detailed parameter configuration, please refer to: [Poptip Documentation] or [Popinfo Documentation]

Popup Menu

Used to quickly bind Menu functionality to an element.

It is a lightweight implementation of the TuiMenu component, supporting left-click, hover, or right-click menus, with the data source completely driven by the menus array.

Basic Usage

<script setup>
const menuData = [
  { label: 'Copy', value: 'copy', icon: 'ti-copy' },
  { label: 'Paste', value: 'paste', icon: 'ti-paste' }
]
</script>

<template>
  <div 
    class="context-area"
    v-tui-menu="{ 
      trigger: 'contextmenu', 
      menus: menuData,
      menuClick: (params) => console.log(params)
    }"
  >
    Right-click in this area
  </div>
</template>

For detailed parameter configuration, please refer to: [Menu Documentation]

Cursor Tip

Used to generate a CursorTip that follows mouse movement.

It uses Virtual Anchor technology to make the tooltip attach to the mouse in real-time. It is commonly used in areas requiring real-time status feedback (such as map exploration, drawing boards, status indication).

Basic Usage

<template>
  <div 
    class="explore-zone"
    v-tui-cursor-tip="{ 
      title: 'Zone A',
      content: 'Status: Running Normally', 
      type: 'success',
      caretOffset: 15
    }"
  >
    Hover Me
  </div>
</template>

For detailed parameter configuration, please refer to: [CursorTip Documentation]