@yashrajbharti/tooltip-component

v1.0.1

Published

5 months ago

A modern, lightweight tooltip component built with Web Components and Shadow DOM

Downloads

0High
0Medium
0Low

tooltip web-components shadow-dom vanilla-js css-logical-properties modern-css ui-component accessibility lightweight zero-dependencies

Tooltip Web Component

A modern, lightweight tooltip component built with Web Components and Shadow DOM. Features CSS logical properties, individual transform properties, and automatic width sizing.

Features

✨ Modern CSS: Uses logical properties (inline-size, block-size, inset-*)
🎯 Shadow DOM: Proper encapsulation with style isolation
📱 Responsive: Automatic width based on content length
🎨 Customizable: Multiple placement options and styling
🚀 Zero Dependencies: Pure vanilla JavaScript
♿ Accessible: Works with screen readers and keyboard navigation

Quick Start

<!DOCTYPE html>
<html>
<head>
    <script src="tooltip-component.js"></script>
</head>
<body>
    <tooltip-component tooltip="Hello World!" placement="top" arrow>
        <button>Hover me</button>
    </tooltip-component>
</body>
</html>

API Reference

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | tooltip | string | "" | Required. The text content to display in the tooltip | | placement | string | "top" | Position of tooltip relative to trigger element | | delay | number | 150 | Show delay in milliseconds | | arrow | boolean | false | Whether to show directional arrow | | width | string | auto | Width mode (auto-determined by text length) | | open | boolean | true | Whether tooltip functionality is enabled |

Placement Options

| Value | Description | |-------|-------------| | top | Tooltip appears above the element | | bottom | Tooltip appears below the element | | left | Tooltip appears to the left of the element | | right | Tooltip appears to the right of the element |

Width Behavior

| Text Length | Width Mode | CSS Value | Description | |-------------|------------|-----------|-------------| | ≤ 50 chars | fit | fit-content | Tooltip sizes to content | | > 50 chars | fixed | 300px | Fixed width with word wrapping |

Delay Options

| Value | Description | |-------|-------------| | 0 | Instant appearance | | 150 | Default delay (recommended) | | 500 | Slower appearance | | 1000 | Very slow appearance |

Usage Examples

Basic Tooltip

<tooltip-component tooltip="Simple tooltip">
    <span>Hover me</span>
</tooltip-component>

With Arrow

<tooltip-component tooltip="Tooltip with arrow" placement="bottom" arrow>
    <button>Button with arrow tooltip</button>
</tooltip-component>

Custom Delay

<tooltip-component tooltip="Delayed tooltip" delay="500">
    <div>Slow tooltip</div>
</tooltip-component>

Long Text (Auto-Fixed Width)

<tooltip-component tooltip="This is a very long tooltip text that will automatically use fixed width mode for better readability and proper text wrapping behavior">
    <button>Long tooltip</button>
</tooltip-component>

Disabled Tooltip

<tooltip-component tooltip="Won't show" open="false">
    <button>No tooltip</button>
</tooltip-component>

Styling

The component uses Shadow DOM for style encapsulation. Tooltips have these default styles:

Background: rgba(97, 97, 97, 0.9) with blur effect
Text: White, 11px, system font
Border Radius: 4px
Padding: 4px block, 8px inline
Z-index: 9999
Animations: Opacity and scale transitions

CSS Logical Properties Used

| Property | Physical Equivalent | Usage | |----------|-------------------|-------| | inline-size | width | Tooltip dimensions | | block-size | height | Tooltip dimensions | | padding-inline | padding-left/right | Horizontal padding | | padding-block | padding-top/bottom | Vertical padding | | inset-inline-start | left | Arrow positioning | | inset-block-start | top | Arrow positioning | | border-inline-* | border-left/right | Arrow borders | | border-block-* | border-top/bottom | Arrow borders |

Architecture

Shadow DOM Structure


tooltip-component
├── #shadow-root
│   ├── <style> (encapsulated styles)
│   ├── <slot> (projects child content)
│   └── <div class="tooltip"> (tooltip element)
│       └── <div class="tooltip-arrow"> (optional arrow)

Event Flow

Mouse Enter → Start delay timer
Delay Complete → Position tooltip → Show with animation
Mouse Leave → Hide with animation
Attribute Change → Update tooltip properties

Performance

No DOM Manipulation: Tooltip element persists, only visibility changes
Optimized Positioning: Efficient viewport boundary detection
CSS Animations: Hardware accelerated transforms
Shadow DOM: Isolated styles prevent reflow/repaint issues

Development

Files

| File | Description | |------|-------------| | tooltip-component.js | Main component implementation | | index.html | Demo page with random tooltip generator |

Building

No build process required. Pure vanilla JavaScript.

Testing

Open index.html in a browser to test all tooltip configurations with the random generator.

License

MIT License - feel free to use in personal and commercial projects.

Contributing

Fork the repository
Make your changes
Test thoroughly
Submit a pull request

Note: This component uses modern web standards. For legacy browser support, consider using polyfills for Custom Elements and Shadow DOM.