# Tooltip Tooltip is a small, contextual popup that appears when you hover over, tap or focus on a UI element (like a button or icon). It provides quick explanatory text or a hint about the element\'s function without permanently cluttering the screen. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tooltip--introduction ## Variants documented in Storybook - Tooltips: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-tooltip--tooltips ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Tooltip. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html

Components

Tooltip

Tooltip is a small, contextual popup that appears when you hover over, tap or focus on a UI element (like a button or icon). It provides quick explanatory text or a hint about the element's function without permanently cluttering the screen.

Implementation Showcase

Explore interactive tooltips with various placements and sizes.

CSS Class Reference

Quickly copy placement and size utilities for tooltips.

Placement Utilities

ux4g-tooltip-top-left

ux4g-tooltip-top-center

ux4g-tooltip-top-right

ux4g-tooltip-left-center

ux4g-tooltip-bottom-left

ux4g-tooltip-bottom-center

ux4g-tooltip-bottom-right

ux4g-tooltip-right-center

Size Utilities

Small (S) ux4g-tooltip-s

Extra Small (XS) ux4g-tooltip-xs

``` React: ```jsx import React from 'react'; const TooltipExample1Demo = () => ( <>

Components

Tooltip

Implementation Showcase

Explore interactive tooltips with various placements and sizes.

Tooltip text on Top Left

Tooltip text on Top Center

Tooltip text on Top Right

Tooltip text on Left Center

Tooltip text on Bottom Left

Tooltip text on Bottom Center

Tooltip text on Bottom Right

Tooltip text on Right Center

CSS Class Reference

Quickly copy placement and size utilities for tooltips.

{/* Placement Utilities (Column 6) */}

Placement Utilities

ux4g-tooltip-top-left

ux4g-tooltip-top-center

ux4g-tooltip-top-right

ux4g-tooltip-left-center

ux4g-tooltip-bottom-left

ux4g-tooltip-bottom-center

ux4g-tooltip-bottom-right

ux4g-tooltip-right-center

{/* Size Utilities (Column 6) */}

Size Utilities

Small (S) ux4g-tooltip-s

Extra Small (XS) ux4g-tooltip-xs

); export default TooltipExample1Demo; ``` Angular: ```html

Components

Tooltip

Implementation Showcase

Explore interactive tooltips with various placements and sizes.

CSS Class Reference

Quickly copy placement and size utilities for tooltips.

Placement Utilities

ux4g-tooltip-top-left

ux4g-tooltip-top-center

ux4g-tooltip-top-right

ux4g-tooltip-left-center

ux4g-tooltip-bottom-left

ux4g-tooltip-bottom-center

ux4g-tooltip-bottom-right

ux4g-tooltip-right-center

Size Utilities

Small (S) ux4g-tooltip-s

Extra Small (XS) ux4g-tooltip-xs

``` ### 2. Tooltips — Small Tooltips (ux4g-tooltip-s) HTML: ```html ``` React: ```jsx import React from 'react'; const TooltipExample2Demo = () => ( <> {/* Variant: Small Tooltip - Top Left */}

This is a S tooltip on Top Left.

{/* Variant: Small Tooltip - Top Center */}

This is a S tooltip on Top Center.

{/* Variant: Small Tooltip - Top Right */}

This is a S tooltip on Top Right.

{/* Variant: Small Tooltip - Left Center */}

This is a S tooltip on Left Center.

{/* Variant: Small Tooltip - Bottom Left */}

This is a S tooltip on Bottom Left.

{/* Variant: Small Tooltip - Bottom Center */}

This is a S tooltip on Bottom Center.

{/* Variant: Small Tooltip - Bottom Right */}

This is a S tooltip on Bottom Right.

{/* Variant: Small Tooltip - Right Center */}

This is a S tooltip on Right Center.

); export default TooltipExample2Demo; ``` Angular: ```html ``` ### 3. Tooltips — Extra Small Tooltips (ux4g-tooltip-xs) HTML: ```html ``` React: ```jsx import React from 'react'; const TooltipExample3Demo = () => ( <> {/* Variant: Extra Small Tooltip - Top Left */}

Lorem ipsum dolor sit amet consectetur adipisicing

{/* Variant: Extra Small Tooltip - Top Center */}

Lorem ipsum dolor sit amet consectetur adipisicing

{/* Variant: Extra Small Tooltip - Top Right */}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero consequatur sequi, consequuntur perspiciatis esse fugiat, sit possimus quibusdam ipsam repellat.

{/* Variant: Extra Small Tooltip - Left Center */}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum molestias praesentium cumque autem numquam rerum quia exercitationem facilis eaque.

{/* Variant: Extra Small Tooltip - Bottom Left */}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis quasi eum eaque cumque ut officiis explicabo reprehenderit, magni culpa voluptate modi.

{/* Variant: Extra Small Tooltip - Bottom Center */}

Lorem ipsum dolor sit amet consectetur

{/* Variant: Extra Small Tooltip - Bottom Right */}

Lorem ipsum dolor sit amet consectetur

{/* Variant: Extra Small Tooltip - Right Center */}

Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, quaerat fuga magnam facilis illum animi veniam vel mollitia, iusto ratione doloribus nisi?

); export default TooltipExample3Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.