## Usage ### React ```tsx import React from 'react'; import { KvToggleTip, KvIcon, KvActionButton, EIconName, ETooltipPosition, EActionButtonType } from '@kelvininc/react-ui-components'; export const ToggleTipExample: React.FC = () => ( <> {/*-- Default --*/} Learn More {/*-- With Fixed Position --*/} Learn More {/*-- With Allowed Positions --*/} Learn More ); ``` ## Properties | Property | Attribute | Description | Type | Default | | ------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------ | | `allowedPositions` | `allowed-positions` | (optional) Array of allowed positions of toggle tip (if defined the 'position' is ignored) | `ETooltipPosition[]` | `undefined` | | `customClass` | `custom-class` | (optional) Additional classes to apply for custom CSS. If multiple classes are provided they should be separated by spaces. It is also valid to provide CssClassMap with boolean logic. | `CssClassMap \| string \| string[]` | `''` | | `disabled` | `disabled` | (optional) if true it will disable clicks to open toggle tip | `boolean` | `false` | | `isFixed` | `is-fixed` | (optional) if true it will ignore outside clicks to close the toggle tip | `boolean` | `false` | | `isOpen` | `is-open` | (optional) Set open state of toggle tip, default false | `boolean` | `false` | | `options` | `options` | (optional) Object with tooltip position options | `{ strategy?: Strategy; placement?: Placement; middleware?: (false \| { name: string; options?: any; fn: (state: { x: number; y: number; initialPlacement: Placement; strategy: Strategy; platform: Platform; placement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable; })[]; platform?: Platform; }` | `DEFAULT_TOOLTIP_CONFIG` | | `position` | `position` | (optional) Position of toggletip | `ETooltipPosition.Bottom \| ETooltipPosition.BottomEnd \| ETooltipPosition.BottomStart \| ETooltipPosition.Left \| ETooltipPosition.LeftEnd \| ETooltipPosition.LeftStart \| ETooltipPosition.Right \| ETooltipPosition.RightEnd \| ETooltipPosition.RightStart \| ETooltipPosition.Top \| ETooltipPosition.TopEnd \| ETooltipPosition.TopStart` | `undefined` | | `text` | `text` | (optional) Text of toggletip | `string` | `undefined` | | `withArrow` | `with-arrow` | (optional) if true it will render an arrow pointing to the opening element | `boolean` | `false` | ## Events | Event | Description | Type | | ----------------- | --------------------------------------------- | ---------------------- | | `openStateChange` | Emitted when the dropdown opens state changes | `CustomEvent` | ## Dependencies ### Used by - [kv-description-list](../description-list) - [kv-wizard-header](../wizard-header) ### Depends on - [kv-portal](../portal) - [kv-tooltip-text](../tooltip-text) ### Graph ```mermaid graph TD; kv-toggle-tip --> kv-portal kv-toggle-tip --> kv-tooltip-text kv-description-list --> kv-toggle-tip kv-wizard-header --> kv-toggle-tip style kv-toggle-tip fill:#f9f,stroke:#333,stroke-width:4px ``` ----------------------------------------------