Tooltip

Element ustiga sichqonchani olib borganda, bosganda, fokuslaganda yoki o‘ng tugmani bosganda ma’lumot matnini ko‘rsatuvchi popup.

Basic

vue

<VxTooltip content="This is a tooltip">
  <VxButton>Hover me</VxButton>
</VxTooltip>

Theme

Qorong‘i (standart) va yorug‘ mavzular.

vue

<VxTooltip content="Dark theme" theme="dark">...</VxTooltip>
<VxTooltip content="Light theme" theme="light">...</VxTooltip>

Custom Color

Istalgan fon va matn rangini belgilang.

vue

<VxTooltip content="Blue" color="#3b82f6" text-color="#fff" arrow>
  <VxButton>Blue</VxButton>
</VxTooltip>

<VxTooltip content="Green" color="#22c55e" text-color="#fff" arrow>
  <VxButton>Green</VxButton>
</VxTooltip>

<VxTooltip content="Gradient" color="linear-gradient(135deg, #667eea, #764ba2)" text-color="#fff">
  <VxButton>Gradient</VxButton>
</VxTooltip>

Arrow

Triggerga qaratilgan yo‘nalish ko‘rsatuvchi strelka chiqaring.

vue

<VxTooltip content="With arrow" arrow>
  <VxButton>Hover me</VxButton>
</VxTooltip>

<VxTooltip content="Light arrow" arrow theme="light">
  <VxButton>Hover me</VxButton>
</VxTooltip>

Trigger

hover (standart), click, focus va contextmenu triggerlarini qo‘llab-quvvatlaydi.

vue

<VxTooltip content="Hover" trigger="hover">...</VxTooltip>
<VxTooltip content="Click" trigger="click">...</VxTooltip>
<VxTooltip content="Focus" trigger="focus">...</VxTooltip>
<VxTooltip content="Right-click" trigger="contextmenu">...</VxTooltip>

v-model

Tooltipning ko‘rinishini v-model orqali dasturiy boshqaring.

vue

<script setup>
const visible = ref(false)
</script>

<VxTooltip v-model="visible" content="Controlled tooltip">
  <VxButton>Target</VxButton>
</VxTooltip>

<VxButton @click="visible = !visible">Toggle</VxButton>

Before Show Hook

Tooltip paydo bo‘lishidan oldin asinxron tekshiruvni ishga tushiring. Uni to‘xtatish uchun false qaytaring yoki xatolik tashlang.

vue

<script setup>
async function check() {
  const ok = await verifyPermission()
  return ok
}
</script>

<VxTooltip content="Allowed!" :before-show="check">
  <VxButton>Guarded</VxButton>
</VxTooltip>

Auto Close

Berilgan vaqt (ms)dan so‘ng tooltipni avtomatik yopish.

vue

<VxTooltip content="Disappears in 2s" :auto-close="2000">
  <VxButton>Auto Close</VxButton>
</VxTooltip>

Copyable

Tooltipni bosib uning matnini clipboard’ga nusxalash.

vue

<VxTooltip content="npm install veloxui" copyable @copy="onCopy">
  <code>npm install veloxui</code>
</VxTooltip>

Loading

Tooltip ichida spinner ko‘rsatish.

vue

<VxTooltip loading>
  <VxButton>Loading</VxButton>
</VxTooltip>

Persistent (v-show)

Yashirilganda ham tooltipning DOM tugunini saqlab qoling. Tooltip tez-tez ochilib-yopilib turganda samaradorlik uchun foydali.

vue

<VxTooltip content="I stay in the DOM" persistent>
  <VxButton>Persistent</VxButton>
</VxTooltip>

Teleport

overflow: hidden konteynerlardan chiqib ketish uchun tooltipni body’ga teleport qiling.

vue

<div style="overflow: hidden;">
  <VxTooltip content="I escape!" teleport-to="body">
    <VxButton>Teleported</VxButton>
  </VxTooltip>
</div>

Content Slot

Tooltipning boy kontenti uchun #content slotidan foydalaning.

vue

<VxTooltip theme="light" arrow>
  <template #content>
    <div>
      <strong>Pro tip</strong>
      <p>Rich content in tooltips</p>
    </div>
  </template>
  <VxButton>Rich Content</VxButton>
</VxTooltip>

Raw HTML

raw prop bilan HTML satrlarini renderlash.

vue

<VxTooltip content="<strong>bold</strong> and <em>italic</em>" raw>
  <VxButton>Raw HTML</VxButton>
</VxTooltip>

Always Visible

vue

<VxTooltip content="I'm always here" always>
  <VxButton>Always Visible</VxButton>
</VxTooltip>

Delay

Ko‘rsatish va yashirish kechikishlarini millisekundlarda sozlang.

vue

<VxTooltip content="Slow" :show-delay="500">...</VxTooltip>
<VxTooltip content="Instant" :show-delay="0" :hide-delay="0">...</VxTooltip>

Non-Enterable

Kursor triggerdan chiqishi bilan tooltip darhol yashirinadi.

vue

<VxTooltip content="Enterable" :enterable="true">...</VxTooltip>
<VxTooltip content="Not enterable" :enterable="false">...</VxTooltip>

Disabled

vue

<VxTooltip content="Hidden" disabled>
  <VxButton disabled>Disabled</VxButton>
</VxTooltip>

On Various Elements

vue

<VxTooltip content="Badge"><VxBadge value="3" /></VxTooltip>
<VxTooltip content="Avatar"><VxAvatar name="John" /></VxTooltip>
<VxTooltip content="Help"><span class="help">What?</span></VxTooltip>

API

Props

Prop	Type	Default	Description
`v-model`	`boolean`	—	Ko‘rinishni dasturiy boshqarish
`content`	`string`	`''`	Tooltip matni
`trigger`	`'hover' \| 'click' \| 'focus' \| 'contextmenu'`	`'hover'`	Tooltipni chaqirish usuli
`theme`	`'dark' \| 'light'`	`'dark'`	Vizual mavzu
`color`	`string`	`''`	Maxsus fon rangi (CSS qiymati, gradientlar qo‘llab-quvvatlanadi)
`textColor`	`string`	`''`	Maxsus matn rangi
`arrow`	`boolean`	`false`	Yo‘nalish strelkasini ko‘rsatish
`disabled`	`boolean`	`false`	Tooltipni o‘chirib qo‘yish
`showDelay`	`number`	`100`	Ko‘rsatishdan oldingi kechikish (ms)
`hideDelay`	`number`	`100`	Yashirishdan oldingi kechikish (ms)
`autoClose`	`number`	`0`	N ms o‘tgach avtomatik yopish (0 = o‘chirilgan)
`offset`	`number`	`8`	Triggerdan masofa (px)
`maxWidth`	`string \| number`	`280`	Tooltipning maksimal kengligi
`enterable`	`boolean`	`true`	Kursor tooltip ustiga tushganda uni ochiq qoldirish
`raw`	`boolean`	`false`	`content`ni xom HTML sifatida renderlash
`always`	`boolean`	`false`	Tooltipni doimo ko‘rinib turadigan qilish
`copyable`	`boolean`	`false`	Bosilganda matnni clipboard’ga nusxalash
`loading`	`boolean`	`false`	Matn o‘rniga loading spinnerini ko‘rsatish
`persistent`	`boolean`	`false`	Yashirilganda DOM’ni saqlab qolish (v-show vs v-if)
`beforeShow`	`() => boolean \| Promise<boolean>`	—	Asinxron tekshiruv; bloklash uchun `false` qaytaring yoki error tashlang
`teleportTo`	`string`	`''`	Teleport mo‘ljali (masalan, `'body'`) — overflow’dan qochish uchun
`transition`	`string`	`'vx-tooltip'`	Maxsus transition nomi

Events

Event	Payload	Description
`update:modelValue`	`boolean`	v-model sinxronlashuvi
`show`	—	Tooltip ko‘rindi
`hide`	—	Tooltip yashirildi
`copy`	`string`	Matn clipboard’ga nusxalandi (`copyable` yoqilganda)

Slots

Slot	Description
`default`	Trigger elementi
`content`	Tooltipning maxsus kontenti (`content` propining o‘rniga qo‘yiladi)

Exposed Methods

Method	Description
`show()`	Tooltipni dasturiy ko‘rsatish
`hide()`	Tooltipni dasturiy yashirish
`updatePosition()`	Pozitsiyani qayta hisoblash

Tooltip ​

Basic ​

Theme ​

Custom Color ​

Arrow ​

Trigger ​

v-model ​

Before Show Hook ​

Auto Close ​

Copyable ​

Loading ​

Persistent (v-show) ​

Teleport ​

Content Slot ​

Raw HTML ​

Always Visible ​

Delay ​

Non-Enterable ​

Disabled ​

On Various Elements ​

API ​

Props ​

Events ​

Slots ​

Exposed Methods ​