@yashrajbharti/tooltip-component

# 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. ## 🚀 [Live Demo on CodePen](https://codepen.io/driftblaze/pen/QwjQzLp) ## 📦 [npm Package](https://www.npmjs.com/package/@yashrajbharti/tooltip-component) ## 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 ```html <!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 ```html <tooltip-component tooltip="Simple tooltip"> <span>Hover me</span> </tooltip-component> ``` ### With Arrow ```html <tooltip-component tooltip="Tooltip with arrow" placement="bottom" arrow> <button>Button with arrow tooltip</button> </tooltip-component> ``` ### Custom Delay ```html <tooltip-component tooltip="Delayed tooltip" delay="500"> <div>Slow tooltip</div> </tooltip-component> ``` ### Long Text (Auto-Fixed Width) ```html <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 ```html <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 1. **Mouse Enter** → Start delay timer 2. **Delay Complete** → Position tooltip → Show with animation 3. **Mouse Leave** → Hide with animation 4. **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](LICENSE) - feel free to use in personal and commercial projects. ## Contributing 1. Fork the repository 2. Make your changes 3. Test thoroughly 4. Submit a pull request --- **Note**: This component uses modern web standards. For legacy browser support, consider using polyfills for Custom Elements and Shadow DOM.