Skip to content

Commit

Permalink
fix: readme missing important info
Browse files Browse the repository at this point in the history
  • Loading branch information
kevinchappell committed Nov 15, 2024
1 parent 6925187 commit 403ba4c
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 4 deletions.
87 changes: 87 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
# @draggable/tooltip

A smart tooltip library that automatically positions tooltips optimally within the viewport.

![draggable-tooltip](https://github.com/user-attachments/assets/33b20fa6-f9ee-456d-8793-f26b03aaeb75)


## Installation

```bash
npm install @draggable/tooltip
```

## Usage

```javascript
import { Tooltip } from '@draggable/tooltip';

// Initialize with default options
const tooltip = new Tooltip();

// Or with custom options
const tooltip = new Tooltip({
triggerName: 'custom-tooltip'
});
```

note: when using umd or iffe, tooltip can be accessed via `window.SmartTooltip`

```html

## HTML Usage

Add tooltips to any element using data attributes:

```html
<!-- Hover tooltip (default) -->
<div data-tooltip="This is a tooltip">Hover me</div>

<!-- Click tooltip -->
<button data-tooltip="Click tooltip" data-tooltip-type="click">Click me</button>
```

## Options

| Option | Type | Default | Description |
|--------|------|---------|-------------|
| triggerName | string | 'tooltip' | The name used for the data attribute trigger (e.g., 'tooltip' becomes 'data-tooltip') |

## Features

- 🎯 Smart positioning: Automatically finds the best position to display the tooltip
- 🖱️ Multiple trigger types: Support for both hover and click triggers
- 📱 Responsive: Automatically repositions on viewport resize and scroll
- 🎨 Customizable: Easy to style and configure
- 🔄 8-way positioning: top, bottom, left, right, and corner positions

## Positions

The tooltip will attempt to position itself in the following order, choosing the first position that fits within the viewport:
- top
- bottom
- left
- right
- top-left
- top-right
- bottom-left
- bottom-right

## Trigger Types

### Hover Trigger
```html
<div data-tooltip="Hover tooltip">Hover me</div>
```

### Click Trigger
```html
<div data-tooltip="Click tooltip" data-tooltip-type="click">Click me</div>
```

## Cleanup

```javascript
// Remove event listeners and cleanup
tooltip.destroy();
```
2 changes: 2 additions & 0 deletions src/js/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -253,6 +253,8 @@ export class SmartTooltip {
}
}

export const Tooltip = SmartTooltip

declare global {
interface Window {
SmartTooltip: typeof SmartTooltip
Expand Down
4 changes: 0 additions & 4 deletions vite.config.dev.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { defineConfig } from 'vite'
import type { UserConfigExport } from 'vite'
import { resolve } from 'node:path'
import { createHtmlPlugin } from 'vite-plugin-html'
import { patchCssModules } from 'vite-css-modules'
import { isProduction, pkgName, shortName, version } from './env.ts'

const config: UserConfigExport = defineConfig({
Expand Down Expand Up @@ -48,9 +47,6 @@ const config: UserConfigExport = defineConfig({
},
},
}),
// patchCssModules({
// generateSourceTypes: true,
// }),
],
resolve: {
alias: {
Expand Down

0 comments on commit 403ba4c

Please sign in to comment.