Tooltip

Popup hiển thị thông tin liên quan đến phần tử khi phần tử nhận focus bàn phím hoặc chuột di chuyển qua.

Hover me

Cài đặt

npm

npx @galaxy-stack/nebula-cli@latest add tooltip

pnpm

pnpm dlx @galaxy-stack/nebula-cli@latest add tooltip

yarn

yarn dlx @galaxy-stack/nebula-cli@latest add tooltip

bun

bunx @galaxy-stack/nebula-cli@latest add tooltip

Sử dụng

Vue

<script setup lang="ts">
import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui'
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger>Di chuột vào đây</TooltipTrigger>
      <TooltipContent>
        <p>Thêm vào thư viện</p>
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>

React

import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from '@/components/ui'

export default function TooltipDemo() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger>Di chuột vào đây</TooltipTrigger>
        <TooltipContent>
          <p>Thêm vào thư viện</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  )
}

Angular

import { Component } from '@angular/core';
import { TooltipComponent } from '@/components/ui';

@Component({
  selector: 'app-tooltip-demo',
  standalone: true,
  imports: [TooltipComponent],
  template: `
    <ui-tooltip>
      <button trigger>Di chuột vào đây</button>
      <div content>Thêm vào thư viện</div>
    </ui-tooltip>
  `
})
export class TooltipDemoComponent {}

Khả năng truy cập

• Điều hướng bàn phím: [TODO]
• Đọc màn hình: [TODO]
• Quản lý focus: [TODO]
• Tuân thủ WCAG: Tuân thủ WCAG 2.1 cấp độ AA

Tác giả

Bùi Trọng Hiếu (kevinbui)

• GitHub: @buikevin
• Email: kevinbui210191@gmail.com

Giấy phép

MIT © 2025 Bùi Trọng Hiếu (kevinbui)