gufaUITooltip
Basic tooltip
Usage
Import
ts
import { Atooltip } from "@agufaui/${framework name}";
Html
<atooltip /> or <Atooltip />
Configuration
Theme component name: atooltip
Showcase
- Hover over icon to see tooltip
Click to see code
vue
<atooltip v="user name" />
<atooltip v="long description" vc="!bg-green-4" ic="!text-green-4" />AgufaUI provided Theme
CDefaultType is just string constant "default"
ts
import { CDefaultType } from "@agufaui/config";
import type { IATooltipProps } from "../../types/basic/ATooltip";
export const DATooltipDefault = {
vc: "bottom-6 rounded shadow-lg p-2 bg-blue-4 text-white min-w-12",
ic: "text-blue-4 h-5 w-5",
};
export const DATooltip: Readonly<Record<string, IATooltipProps>> = {
[CDefaultType]: DATooltipDefault,
};
Attributes (Properties)
Default Values
vue
i: "i-ph:question-fill",Unique
ts
export interface IATooltipProps extends IProps, IPropsIcon {
v?: string; // message. Not configurable
vc?: string; // css classes for message 'span' html element
}Inherit from IProps
ts
export interface IProps {
t?: string; // user defined or AgufaUI provided component type. Not configurable
c?: string; // css classes for component root html element
}Inherit from IPropsIcon
ts
export type TLRPosition = "left" | "right";
export interface IPropsIcon {
i?: string; // icon eg. i-eos-icons:loading
ipos?: TLRPosition; // icon position
ic?: string; // css classes for icon element
}