@emporix/component-library 1.7.1 → 1.8.0

package/README.md

@@ -228,6 +228,55 @@ const tabs: TabItem[] = [
 | label   | string    | Display label for the tab      |
 | content | ReactNode | Content to display when active |
 
+### Tooltip
+
+Floating overlays on hover or focus, similar to [PrimeReact Tooltip](https://primereact.org/tooltip/). Use **children mode** to wrap a button, input, or other component, or **selector mode** with a CSS `target` and `data-pr-tooltip` / `data-pr-position` on matching elements.
+
+```tsx
+import { Tooltip } from '@emporix/component-library'
+
+// Wrap a control (content prop required)
+<Tooltip content="Save your changes" position="top">
+  <PrimaryButton>Save</PrimaryButton>
+</Tooltip>
+
+// Attach to existing markup — targets use data attributes
+<Tooltip target=".my-help-icon" />
+<i
+  className="my-help-icon pi pi-question-circle"
+  data-pr-tooltip="Extra help"
+  data-pr-position="right"
+/>
+
+// Reactive label while open
+<Tooltip content={saveHint} position="bottom">
+  <PrimaryButton onClick={() => setSaveHint('Saved')}>Save</PrimaryButton>
+</Tooltip>
+```
+
+#### Props
+
+| Prop           | Type                                               | Default | Description                                                                 |
+| -------------- | -------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
+| target         | string                                             | -       | CSS selector for anchor elements; when set, `children` is ignored           |
+| content        | ReactNode                                          | -       | Tooltip body; required for children mode; fallback for selector mode        |
+| position       | `top` \| `bottom` \| `left` \| `right` \| `mouse` | `top`   | Placement; `mouse` follows the pointer                                      |
+| event          | `hover` \| `focus` \| `both`                      | `hover` | How the tooltip is triggered                                              |
+| showDelay      | number                                             | `0`     | Delay before show (ms)                                                      |
+| hideDelay      | number                                             | `0`     | Delay before hide (ms)                                                      |
+| autoHide       | boolean                                            | `true`  | When `false`, pointer can move to the tooltip without hiding it             |
+| mouseTrack     | boolean                                            | `false` | While visible, position tracks the pointer                                  |
+| mouseTrackTop  | number                                             | `0`     | Vertical offset when using mouse track                                      |
+| mouseTrackLeft | number                                             | `0`     | Horizontal offset when using mouse track                                    |
+| disabled       | boolean                                            | `false` | Disable the tooltip                                                         |
+| className      | string                                             | -       | Extra class on the anchor wrapper (children mode) or merged on single child |
+| panelClassName | string                                             | -       | Extra class on the floating panel                                           |
+| id             | string                                             | -       | Optional id for the tooltip (`aria-describedby` on the anchor)             |
+| children       | ReactNode                                          | -       | Single element recommended; multiple nodes are wrapped in an inline span    |
+| data-testid    | string                                             | -       | Adds `data-testid` on the panel as `{id}-panel`                             |
+
+Selector targets can override position per element with `data-pr-position`. Escape closes the tooltip.
+
 ### Accordion
 
 Collapsible content panels grouped in tabs.
@@ -363,6 +412,13 @@ Reusable focus outline for inputs, dropdowns, SelectButton, etc. Override to cha
 --focus-ring-box-shadow: 0 0 0 2px rgba(38, 101, 183, 0.35);
 ```
 
+#### Tooltip
+
+```css
+--color-tooltip-bg: #3e4759;
+--color-tooltip-text: #ffffff;
+```
+
 #### Spacing
 
 ```css

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right' | 'mouse';
+export type TooltipEventMode = 'hover' | 'focus' | 'both';
+export interface TooltipProps {
+    /**
+     * CSS selector for target elements (comma-separated allowed).
+     * When set, `children` is ignored. Per-target text: `data-pr-tooltip`.
+     * Optional per-target position: `data-pr-position` (top|bottom|left|right|mouse).
+     */
+    target?: string;
+    /**
+     * Tooltip body. Required when wrapping `children`. For `target` mode, used when an element has no `data-pr-tooltip`.
+     */
+    content?: React.ReactNode;
+    /** Placement relative to the anchor. Use `mouse` to pin near the pointer. */
+    position?: TooltipPosition;
+    /** hover (default), focus, or both */
+    event?: TooltipEventMode;
+    showDelay?: number;
+    hideDelay?: number;
+    /**
+     * When false, the tooltip stays visible when the pointer moves from the anchor to the tooltip panel.
+     */
+    autoHide?: boolean;
+    /** While visible, follow the pointer */
+    mouseTrack?: boolean;
+    mouseTrackTop?: number;
+    mouseTrackLeft?: number;
+    /** Do not show the tooltip */
+    disabled?: boolean;
+    /**
+     * Extra class on the anchor wrapper (children mode only). Ignored when using `target` only.
+     */
+    className?: string;
+    /** Class name on the floating tooltip panel */
+    panelClassName?: string;
+    /** Stable id for the tooltip node (`aria-describedby` on the anchor while open) */
+    id?: string;
+    /**
+     * Element(s) to attach the tooltip to. Not used when `target` is set.
+     * Multiple nodes are wrapped in an inline container.
+     */
+    children?: React.ReactNode;
+    'data-testid'?: string;
+}
+export declare const Tooltip: ({ target, content, position, event: eventMode, showDelay, hideDelay, autoHide, mouseTrack, mouseTrackTop, mouseTrackLeft, disabled, className, panelClassName, id: idProp, children, "data-testid": testId, }: TooltipProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KASN,MAAM,OAAO,CAAA;AAOd,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAA;AAE3E,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,CAAA;AAEzD,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,eAAe,CAAA;IAC1B,sCAAsC;IACtC,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+CAA+C;IAC/C,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB;AA+MD,eAAO,MAAM,OAAO,GAAI,+MAiBrB,YAAY,4CA4Ud,CAAA"}

package/dist/index.d.ts

@@ -24,6 +24,8 @@ export { AccordionTab } from './components/accordion/AccordionTab';
 export type { AccordionTabProps } from './components/accordion/AccordionTab';
 export { SelectButton } from './components/selectbutton/SelectButton';
 export type { SelectButtonProps, SelectButtonOption, SelectButtonChangeEvent, } from './components/selectbutton/SelectButton';
+export { Tooltip } from './components/tooltip/Tooltip';
+export type { TooltipProps, TooltipPosition, TooltipEventMode, } from './components/tooltip/Tooltip';
 export { ToastProvider, useToast, ToastTemplate } from './components/toast';
 export type { ToastProviderProps, ToastTemplateProps, ToastErrorItem, ToastErrorMessage, ToastSeverity, } from './components/toast';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAA;AAC5D,YAAY,EACV,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAClE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAC3E,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,aAAa,GACd,MAAM,oBAAoB,CAAA;AAG3B,OAAO,qBAAqB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,oCAAoC,CAAA;AAClE,YAAY,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAA;AAE5E,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AACtE,YAAY,EAAE,oBAAoB,EAAE,MAAM,sCAAsC,CAAA;AAEhF,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAA;AAC7C,YAAY,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAEhE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAA;AACzD,YAAY,EACV,aAAa,EACb,cAAc,EACd,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,gCAAgC,CAAA;AAEvC,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAA;AACxD,YAAY,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAA;AAElE,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAA;AAC5D,YAAY,EACV,cAAc,EACd,sBAAsB,EACtB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAClE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAA;AAE5E,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAA;AACrE,YAAY,EACV,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,wCAAwC,CAAA;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AACtD,YAAY,EACV,YAAY,EACZ,eAAe,EACf,gBAAgB,GACjB,MAAM,8BAA8B,CAAA;AAErC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAC3E,YAAY,EACV,kBAAkB,EAClB,kBAAkB,EAClB,cAAc,EACd,iBAAiB,EACjB,aAAa,GACd,MAAM,oBAAoB,CAAA;AAG3B,OAAO,qBAAqB,CAAA"}