工具提示
工具提示會在使用者與元素互動時顯示簡短的資訊訊息。
安裝
上述命令僅適用於單獨安裝。如果已全域安裝 @nextui-org/react 則可跳過此步驟。
導入
對於單獨安裝，請注意您應該將
./node_modules/@nextui-org/theme/dist/components/popover.js加入您的tailwind.config.js檔案中，因為 tooltip 重複使用了 popover 的樣式。
使用方式
帶有箭頭
顏色
位置
偏移量
受控的
帶有延遲
您可以使用 delay 和 closeDelay 屬性來控制工具提示的 open 和 close 延遲時間。
將滑鼠懸停在第二個按鈕上會立即顯示工具提示。如果您在懸停到另一個元素之前等待一段延遲時間，則延遲會重新開始。
自訂內容
自訂動態效果
工具提示提供 motionProps 屬性來自訂 enter / exit 動畫。
深入了解 Framer motion 變體，請點擊此處。
插槽
- base：主要的工具提示插槽，它會包覆工具提示的內容。
- arrow：箭頭插槽，它會包覆工具提示的箭頭，箭頭的位置是根據工具提示的放置位置而定，例如：
data-[placement=top]:...。
自訂樣式
您可以透過將自訂的 Tailwind CSS 類別傳遞到元件插槽，來自訂 Tooltip 元件。
資料屬性
Tooltip 在 base 元素上具有下列屬性：
- data-open：當工具提示開啟時。基於工具提示的狀態。
- data-placement：工具提示的放置位置。基於
placement屬性。箭頭元素的位置是根據此屬性而定。 - data-disabled：當工具提示停用時。基於
isDisabled屬性。
無障礙功能
- 鍵盤焦點管理和跨瀏覽器正規化。
- 懸停管理和跨瀏覽器正規化。
- 螢幕閱讀器標籤支援 (aria-describedby)。
- 透過 ARIA 作為工具提示公開給輔助技術。
- 符合原生工具提示行為，第一次懸停時有延遲，後續工具提示則沒有延遲。
API
工具提示屬性
| 屬性 | 類型 | 預設值 |
children* | | |
content | | |
size | | "md" |
color | | "default" |
radius | | "md" |
shadow | | "sm" |
placement | | "top" |
delay | | "0" |
closeDelay | | "500" |
isOpen | | |
defaultOpen | | |
offset | | "7" |
containerPadding | | "12" |
crossOffset | | "0" |
showArrow | | false |
shouldFlip | | true |
triggerScaleOnOpen | | true |
shouldBlockScroll | | true |
isKeyboardDismissDisabled | | false |
isDismissable | | false |
shouldCloseOnBlur | | true |
motionProps | | |
portalContainer | | "document.body" |
updatePositionDeps | | "[]" |
isDisabled | | false |
disableAnimation | | false |
classNames | |
工具提示事件
| 屬性 | 類型 | 預設值 |
onOpenChange | | |
shouldCloseOnInteractOutside | | |
onClose | |
