A lightweight tooltip component that can be used in any web project.
- 🚀 Lightweight: Small bundle size, no external dependencies
- 📱 Responsive: Automatically adapts to different screen sizes
- 🎨 Customizable: Supports custom styles and themes
- 🔧 Easy to use: Simple API, quick integration
- 🌐 Cross-browser: Compatible with modern browsers
- ⚡ High performance: Optimized rendering and event handling
- 🎯 Flexible positioning: Multiple positioning options
- 🔄 Dynamic content: Supports dynamic content updates
npm install lightweight-tip-component
# or
yarn add lightweight-tip-component
# or
pnpm add lightweight-tip-component<!DOCTYPE html>
<html>
<head>
<title>Tooltip Demo</title>
</head>
<body>
<!-- use in html -->
<jk-tip>This is a long text, and a hint will be automatically displayed when the container width is insufficient.</jk-tip>
<script type="importmap">
{
"imports": {
"lightweight-tip-component": "./node_modules/lightweight-tip-component/dist/lightweight-tip-component.es.js"
}
}
</script>
<script type="module">
import TipWebComponent from 'lightweight-tip-component';
TipWebComponent.define('my-tips');
</script>
</body>
</html>import TipWebComponent from 'lightweight-tip-component';
// Or import a specific class
import TipWebComponent from 'lightweight-tip-component';
// The component is automatically registered as a <jk-tip> tag
// Or manually register as a custom tag name
TipWebComponent.define('my-tip');<jk-tip>Normal text tip</jk-tip><div style="width: 200px;">
<jk-tip>This is a long text, when the container width is insufficient, the full content will be automatically displayed.</jk-tip>
</div># Clone the repository
git clone https://github.com/JinMokai/lightweight-tip-component.git
cd lightweight-tip-component
# Install dependencies
pnpm install
# Start development server
pnpm run dev# Build library
pnpm run build
pnpm run preview- add custom style
- add custom event
- add custom position
Contributions are welcome! Please follow these steps:
- Fork this repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
If you have any questions or suggestions, feel free to contact us:
Thanks to the xy-ui project for inspiration and reference.