lightweight-tip-component

v0.0.5

Published

8 months ago

A lightweight tooltip component built with Web Components, zero dependencies, small bundle size and easy to use.

0High
0Medium
0Low

ch_jinkai

tooltip web-components lightweight vanilla-js zero-dependencies tip-component

Lightweight Tip Component

A lightweight tooltip component that can be used in any web project.

Language: English | 中文

✨ Features

🚀 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

📦 Installation

npm install lightweight-tip-component
# or
yarn add lightweight-tip-component
# or
pnpm add lightweight-tip-component

🚀 Quick Start

Basic Usage

<!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>

Module Usage

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');

📖 Usage Examples

Basic Tooltip

<jk-tip>Normal text tip</jk-tip>

Custom Position

<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>

🛠 Development

Local Development

# 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

# Build library
pnpm run build

Preview

pnpm run preview

[ ] add custom style
[ ] add custom event
[ ] add custom position

🤝 Contributing

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

📞 Contact

If you have any questions or suggestions, feel free to contact us:

GitHub: https://github.com/your-username/lightweight-tip-component
Issues: GitHub Issues

🙏 Acknowledgments

Thanks to the xy-ui project for inspiration and reference.