A modern, lightweight tooltip component built with Web Components and Shadow DOM. Features CSS logical properties, individual transform properties, and automatic width sizing.
- ✨ 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
<!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>| 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 |
| 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 |
| 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 |
| Value | Description |
|---|---|
0 |
Instant appearance |
150 |
Default delay (recommended) |
500 |
Slower appearance |
1000 |
Very slow appearance |
<tooltip-component tooltip="Simple tooltip">
<span>Hover me</span>
</tooltip-component><tooltip-component tooltip="Tooltip with arrow" placement="bottom" arrow>
<button>Button with arrow tooltip</button>
</tooltip-component><tooltip-component tooltip="Delayed tooltip" delay="500">
<div>Slow tooltip</div>
</tooltip-component><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><tooltip-component tooltip="Won't show" open="false">
<button>No tooltip</button>
</tooltip-component>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
| 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 |
tooltip-component
├── #shadow-root
│ ├── <style> (encapsulated styles)
│ ├── <slot> (projects child content)
│ └── <div class="tooltip"> (tooltip element)
│ └── <div class="tooltip-arrow"> (optional arrow)
- Mouse Enter → Start delay timer
- Delay Complete → Position tooltip → Show with animation
- Mouse Leave → Hide with animation
- Attribute Change → Update tooltip properties
- 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
| File | Description |
|---|---|
tooltip-component.js |
Main component implementation |
index.html |
Demo page with random tooltip generator |
No build process required. Pure vanilla JavaScript.
Open index.html in a browser to test all tooltip configurations with the random generator.
MIT License - feel free to use in personal and commercial projects.
- Fork the repository
- Make your changes
- Test thoroughly
- Submit a pull request