We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Tooltip

Tooltips are subtle UI elements that provide contextual information when users hover over, focus on, or tap an element. They offer quick, informative guidance or explanations without cluttering the interface, enhancing user understanding and interaction.

Basic toggle

html

Optional properties

Use the properties below to style the tooltip and copy the code to your project. Try clicking on them.

Property	Type	Description
`shape`	`flat` \| `pill` \| `curve`	Defines the tooltip's shape. `pill` is a fully rounded tooltip, `curve` has rounded corners, and `flat` is a classic square-cornered tooltip. Default is `flat`.
`position`	`top` \| `bottom` \| `left` \| `right` \| `auto`	Specifies the position of the tooltip relative to its trigger element. By default, the position is set to `auto`, which intelligently adjusts the tooltip's placement to ensure it fits within the viewport. In auto mode, the tooltip typically appears above the trigger element, centered horizontally. You can override this behavior by setting a specific position. Available options include `top`, `bottom`, `left`, and `right`.

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Shape

Property	Description
`shape`	Defines the shape of the tooltip. Can be `flat`, `curve`, or `pill`.

Colors

You can provide each of these colors for different themes that you use

Property	Description
`handlerBgColor`	Background color of the handler of the tooltip.
`handlerTextColor`	Text color of the handler of the tooltip.
`handlerBorderColor`	Border color of the handler of the tooltip.
`handlerBgHoverColor`	Background color of the handler of the tooltip when hovered.
`handlerTextHoverColor`	Text color of the handler of the tooltip when hovered.
`handlerBorderHoverColor`	Border color of the handler of the tooltip when hovered.
`contentBgColor`	Background color of the content of the tooltip.
`contentTextColor`	Text color of the content of the tooltip.
`contentBorderColor`	Border color of the content of the tooltip.

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`contentBorderRadius`	Defines the radius of the content's corners.
`contentPaddingLeft`	Left padding of the content element.
`contentPaddingRight`	Right padding of the content element.
`contentPaddingTop`	Top padding of the content element.
`contentPaddingBottom`	Bottom padding of the content element.
`contentPadding`	Padding around the tooltip's content element.
`contentFontSize`	Font size of the tooltip's content element.
`contentFontWeight`	Font weight of the tooltip's content element.
`contentLineHeight`	Line height of the tooltip's content element.
`contentLetterSpacing`	Letter spacing of the tooltip's content element.
`handlerBorderRadius`	Defines the radius of the handler's corners.
`handlerFontSize`	Font size of the tooltip's handler element.
`handlerFontWeight`	Font weight of the tooltip's handler element.
`handlerLineHeight`	Line height of the tooltip's handler element.
`handlerLetterSpacing`	Letter spacing of the tooltip's handler element.