@sixbell-telco/sdk/components/tooltip/src/tooltip.component.d.ts

A collection of reusable components designed for use in Sixbell Telco Angular projects

import { TooltipContentComponent } from '../tooltip-content/tooltip-content.component';
import * as i0 from "@angular/core";
/**
 * @internal
 * Generates base tooltip classes with style variants
 */
export declare const tooltipComponent: (props?: ({
    variant?: "primary" | "secondary" | "tertiary" | "success" | "neutral" | "warning" | "error" | "info" | null | undefined;
    position?: "top" | "bottom" | "right" | "left" | null | undefined;
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
/** Possible tooltip color variants */
export type TooltipVariantProps = 'primary' | 'secondary' | 'tertiary' | 'success' | 'neutral' | 'warning' | 'error' | 'info' | null | undefined;
/** Possible tooltip position variants */
export type TooltipPositionProps = 'top' | 'bottom' | 'right' | 'left' | null | undefined;
/** Configuration object for tooltip styling */
export type TooltipProps = {
    variant?: TooltipVariantProps;
    position?: TooltipPositionProps;
};
/**
 * A customizable tooltip component with multiple variants and content options
 *
 * @remarks
 * Built with Tailwind CSS and class-variance-authority for style management.
 * Supports both simple text labels and custom content tooltips.
 *
 * @example
 * ```html
 * <!-- Simple text tooltip -->
 * <st-tooltip variant="primary" label="Information tooltip">
 *   <button class="btn">Hover me</button>
 * </st-tooltip>
 * ```
 *
 * @example
 * ```html
 * <!-- Custom content tooltip -->
 * <st-tooltip position="right" variant="warning">
 *   <button class="btn">Dangerous action</button>
 *   <st-tooltip-content>
 *     <div class="text-red-500 font-bold">
 *       ⚠️ Proceed with caution!
 *     </div>
 *   </st-tooltip-content>
 * </st-tooltip>
 * ```
 */
export declare class TooltipComponent {
    /**
     * Tooltip color variant
     * @defaultValue 'primary'
     */
    variant: import("@angular/core").InputSignal<TooltipVariantProps>;
    /**
     * Tooltip position relative to target element
     * @defaultValue 'bottom'
     */
    position: import("@angular/core").InputSignal<TooltipPositionProps>;
    /**
     * Text label for simple tooltip content
     */
    label: import("@angular/core").InputSignal<string | undefined>;
    /**
     * @internal
     * Reference to custom tooltip content component
     */
    customContent: import("@angular/core").Signal<TooltipContentComponent | undefined>;
    /**
     * @internal
     * Computed flag indicating presence of custom content
     */
    hasCustomContent: import("@angular/core").Signal<boolean>;
    /**
     * @internal
     * Computed class string for the tooltip container
     */
    componentClass: import("@angular/core").Signal<string>;
    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "st-tooltip", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; }, {}, ["customContent"], ["*", "st-tooltip-content"], true, never>;
}