Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Tooltip Component

CSS-only Tailwind CSS tooltip with top, bottom, left, and right placement. Color variants, no JavaScript required. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Các thành phần chú giải công cụ hiển thị thông tin bổ sung khi người dùng di chuột qua hoặc tập trung vào một phần tử. Được xây dựng bằng các thuộc tính HTML ngữ nghĩa và CSS, chú giải công cụ nâng cao trải nghiệm người dùng bằng cách cung cấp trợ giúp theo ngữ cảnh cụ thể mà không làm lộn xộn giao diện. Hệ thống chú giải công cụ Frutjam hỗ trợ nhiều vị trí, nội dung tùy chỉnh và hình ảnh động mượt mà để khám phá thông tin liền mạch.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

Lưu ý: Chú giải công cụ dựa trên :hover và :focus, những tính năng này không khả dụng trên thiết bị cảm ứng/di động. Đối với bố cục ưu tiên thiết bị di động, hãy sử dụng biến thể đáp ứng lg:tooltip để chú giải công cụ chỉ kích hoạt trên máy tính để bàn (màn hình lớn trở lên). Trên màn hình nhỏ hơn, hãy cân nhắc sử dụng mẫu tiết lộ khác, chẳng hạn như popover hoặc phương thức.

Lớp học Kiểu Sự miêu tả
tooltipCăn cứTrình bao bọc hiển thị nội dung data-tip khi di chuột/tiêu điểm
tooltip-contentCông cụ sửa đổiNội dung HTML tùy chỉnh bên trong bong bóng chú giải công cụ
tooltip-topCông cụ sửa đổiMở phía trên trình kích hoạt (mặc định)
tooltip-bottomCông cụ sửa đổiMở bên dưới cò súng
tooltip-leftCông cụ sửa đổiMở ở bên trái của cò súng
tooltip-rightCông cụ sửa đổiMở ở bên phải cò súng
tooltip-startCông cụ sửa đổiMở về phía bắt đầu hợp lý
tooltip-endCông cụ sửa đổiMở về phía cuối hợp lý
tooltip-primaryMàu sắcPrimary theme color bubble
tooltip-secondaryMàu sắcSecondary theme color bubble
tooltip-accentMàu sắcAccent theme color bubble
tooltip-neutralMàu sắcNeutral theme color bubble
tooltip-infoMàu sắcInfo semantic color bubble
tooltip-successMàu sắcSuccess semantic color bubble
tooltip-warningMàu sắcWarning semantic color bubble
tooltip-errorMàu sắcError semantic color bubble

Chú giải công cụ

1
2
3
<div class="tooltip" data-tip="Tooltip">
   <button class="btn">Hover me</button>
</div>

1
2
3
<div className="tooltip" data-tip="Tooltip">
   <button className="btn">Hover me</button>
</div>

Nội dung chú giải công cụ tùy chỉnh

❤️
Like
html 
1
2
3
4
5
6
7
<div class="tooltip tooltip-end">
    <div class="tooltip-content">
        <div class="text-xl">❤️</div>
        <div>Like</div>
    </div>
    <button class="btn">Hover me</button>
</div>

Chú giải công cụ có biểu tượng

html 
1
2
3
4
5
6
<div class="tooltip" data-tip="Menu">
    <button class="btn btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
        <span class="sr-only">Menu</span>
    </button>
</div>

Buộc mở chú giải công cụ

html 
1
2
3
<div class="tooltip tooltip-open" data-tip="hello">
  <button class="btn">Force open</button>
</div>

Tùy chọn định vị chú giải công cụ

Vị trí hàng đầu

html 
1
2
3
<div class="tooltip tooltip-top tooltip-open" data-tip="Tooltip top">
    <button class="btn">Top position</button>
</div>

Đúng vị trí

html 
1
2
3
<div class="tooltip tooltip-right tooltip-open" data-tip="Tooltip right">
    <button class="btn">Right position</button>
</div>

Vị trí cuối cùng

html 
1
2
3
<div class="tooltip tooltip-end tooltip-open" data-tip="Tooltip end">
    <button class="btn">End position</button>
</div>

Vị trí dưới cùng

html 
1
2
3
<div class="tooltip tooltip-bottom tooltip-open" data-tip="Tooltip bottom">
    <button class="btn">Bottom position</button>
</div>

Vị trí bên trái

html 
1
2
3
<div class="tooltip tooltip-left tooltip-open" data-tip="Tooltip left">
    <button class="btn">Left position</button>
</div>

Bắt đầu vị trí

html 
1
2
3
<div class="tooltip tooltip-start tooltip-open" data-tip="Tooltip start">
    <button class="btn">Start position</button>
</div>

Các biến thể màu của chú giải công cụ

Màu cơ bản

html 
1
2
3
<div class="tooltip tooltip-primary tooltip-open" data-tip="Primary">
  <button class="btn btn-xs">Primary color</button>
</div>

Màu phụ

html 
1
2
3
<div class="tooltip tooltip-secondary tooltip-open" data-tip="Secondary">
  <button class="btn btn-xs">Secondary color</button>
</div>

Màu nhấn

html 
1
2
3
<div class="tooltip tooltip-accent tooltip-open" data-tip="Accent">
  <button class="btn btn-xs">Accent color</button>
</div>

Màu thông tin

html 
1
2
3
<div class="tooltip tooltip-info tooltip-open" data-tip="Info">
  <button class="btn btn-xs">Info color</button>
</div>

Màu thành công

html 
1
2
3
<div class="tooltip tooltip-success tooltip-open" data-tip="Success">
  <button class="btn btn-xs">Success color</button>
</div>

Màu cảnh báo

html 
1
2
3
<div class="tooltip tooltip-warning tooltip-open" data-tip="Warning">
  <button class="btn btn-xs">Warning color</button>
</div>

Màu lỗi

html 
1
2
3
<div class="tooltip tooltip-error tooltip-open" data-tip="Error">
  <button class="btn btn-xs">Error color</button>
</div>

Màu trung tính

html 
1
2
3
<div class="tooltip tooltip-neutral tooltip-open" data-tip="Neutral">
  <button class="btn btn-xs">Neutral color</button>
</div>

Chú giải công cụ đáp ứng

Chỉ hiển thị trên màn hình lớn với lg:tooltip

html 
1
2
3
<div class="lg:tooltip" data-tip="Hey there!">
  <button class="btn">Hover me</button>
</div>

JS & React Helper

Sử dụng createTooltip từ frutjam/js hoặc useTooltip từ frutjam/react để hiển thị hoặc ẩn chú giải công cụ theo chương trình — hữu ích cho các chuyến tham quan có hướng dẫn hoặc văn bản trợ giúp được kích hoạt.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="flex gap-2 mb-4">
  <button class="btn btn-sm" id="tip-show">Show</button>
  <button class="btn btn-sm" id="tip-hide">Hide</button>
  <button class="btn btn-sm" id="tip-toggle">Toggle</button>
</div>
<div class="tooltip" data-tip="Programmatic tooltip" id="js-tooltip">
  <button class="btn">Target</button>
</div>
<script type="module">
  import { createTooltip } from 'frutjam/js'
  const tip = createTooltip(document.getElementById('js-tooltip'))
  document.getElementById('tip-show').onclick = () => tip.show()
  document.getElementById('tip-hide').onclick = () => tip.hide()
  document.getElementById('tip-toggle').onclick = () => tip.toggle()
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { useTooltip } from 'frutjam/react'

export default function TooltipDemo() {
  const tooltip = useTooltip()
  return (
    <>
      <div className="flex gap-2 mb-4">
        <button className="btn btn-sm" onClick={tooltip.show}>Show</button>
        <button className="btn btn-sm" onClick={tooltip.hide}>Hide</button>
        <button className="btn btn-sm" onClick={tooltip.toggle}>Toggle</button>
      </div>
      <div ref={tooltip.ref} className="tooltip" data-tip="Programmatic tooltip">
        <button className="btn">Target</button>
      </div>
    </>
  )
}