Amply Tooltip

A zero-config, attribute-based tooltip library for Webflow.

Installation

$3

Add to your project's custom code:

``html

rel="stylesheet"
href="https://unpkg.com/@amplydevteam/tooltip/dist/tooltip.css"
/>


type="module"
src="https://unpkg.com/@amplydevteam/tooltip/dist/tooltip.js"
>
`

$3

`bash
npm install @amplydevteam/tooltip
`

`javascript
import "@amplydevteam/tooltip";
`

Usage

Just add attributes to any element. Tooltips auto-initialize on page load.

`html

Hover me

`

Attributes

$3

| Attribute | Description | Example |
| -------------------- | ------------------------------- | -------------------------------------------- |
| amply-tooltip | Marks element as tooltip target | amply-tooltip |
| amply-tooltip-text | Plain text content | amply-tooltip-text="Hello" |
| amply-tooltip-html | HTML content (entities decoded) | amply-tooltip-html="Bold" |

> Note: HTML entities in amply-tooltip-html are automatically decoded for safety.
> Use " for quotes, < for <, > for >.
>
> `html
>
> Hover
> `

$3

| Attribute | Values | Default |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| amply-tooltip-placement | top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end | top |
| amply-tooltip-offset | 0 - 100 (pixels) | 10 |

$3

| Attribute | Values | Default |
| ------------------------- | ---------------------- | ------- |
| amply-tooltip-theme | dark, light | dark |
| amply-tooltip-arrow | true, false | true |
| amply-tooltip-max-width | 50 - 1000 (pixels) | 350 |

$3

| Attribute | Values | Default |
| ------------------------- | --------------------------------------------- | ------- |
| amply-tooltip-animation | fade, scale, shift-away, shift-toward | fade |
| amply-tooltip-duration | 0 - 2000 (ms) | 200 |
| amply-tooltip-delay | 0 - 5000 (ms) | 0 |

$3

| Attribute | Values | Default |
| ----------------------------- | ----------------------------------- | ------- |
| amply-tooltip-trigger | hover, click, focus, manual | hover |
| amply-tooltip-interactive | true, false | false |
| amply-tooltip-hide-on-click | true, false | true |

Examples

$3

`html

Hover me

`

$3

`html
amply-tooltip
amply-tooltip-text="I'm on the bottom!"
amply-tooltip-placement="bottom"
>
Bottom tooltip

`

$3

`html
amply-tooltip
amply-tooltip-text="Light theme tooltip"
amply-tooltip-theme="light"
amply-tooltip-animation="scale"
>
Light & animated

`

$3

`html
amply-tooltip
amply-tooltip-text="Click to toggle!"
amply-tooltip-trigger="click"
>
Click me

`

$3

`html
amply-tooltip
amply-tooltip-html="Rich content with HTML"
amply-tooltip-interactive="true"
amply-tooltip-max-width="200"
>
Hover for details

`

$3

`html
amply-tooltip
amply-tooltip-text="Delayed and slow"
amply-tooltip-delay="500"
amply-tooltip-duration="400"
>
Slow reveal

`

JavaScript API

For advanced use cases, you can control tooltips programmatically:

`javascript
import tooltip, {
initTooltip,
destroyTooltip,
refreshTooltip,
decodeHtmlEntities,
} from "@amplydevteam/tooltip";

// Re-initialize all tooltips (e.g., after dynamic content load)
tooltip.init();

// Initialize a specific element
initTooltip(document.querySelector("#my-button"));

// Destroy tooltip on element
destroyTooltip(document.querySelector("#my-button"));

// Refresh tooltip (re-read attributes)
refreshTooltip(document.querySelector("#my-button"));

// Destroy all tooltips
tooltip.destroyAllTooltips();

// Decode HTML entities (utility)
decodeHtmlEntities("<b>Bold</b>"); // → "Bold"
`

Validation

Options are validated with Zod. Invalid values are logged to console with helpful error messages.

`javascript
import {
validateOptions,
schemas,
} from "@amplydevteam/tooltip";

// Validate options programmatically
const result = validateOptions({
text: "Hello",
placement: "top",
duration: 200,
});

if (result.success) {
console.log(result.data);
} else {
console.error(result.error);
}

// Access schemas for custom validation
const { PlacementSchema, AnimationSchema } = schemas;
`

Development

`bash


Install dependencies

pnpm install

Start dev server

pnpm dev

Build for production

pnpm build
`

Release

`bash


Create release (version bump + changelog + git tag)

pnpm run release

Push with tags

git push --follow-tags origin main

Publish to npm

pnpm publish
``

License

MIT