A zero-config, attribute-based tooltip library for Webflow
npm install @amplydevteam/tooltipA zero-config, attribute-based tooltip library for Webflow.
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"
>
`
`bash`
npm install @amplydevteam/tooltip
`javascript`
import "@amplydevteam/tooltip";
Just add attributes to any element. Tooltips auto-initialize on page load.
`html`
| 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`
>
>
>
| 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 |
| Attribute | Values | Default |
| ------------------------- | ---------------------- | ------- |
| amply-tooltip-theme | dark, light | dark |amply-tooltip-arrow
| | true, false | true |amply-tooltip-max-width
| | 50 - 1000 (pixels) | 350 |
| 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 |
| 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 |
`html`
`html`
amply-tooltip
amply-tooltip-text="I'm on the bottom!"
amply-tooltip-placement="bottom"
>
Bottom tooltip
`html`
amply-tooltip
amply-tooltip-text="Light theme tooltip"
amply-tooltip-theme="light"
amply-tooltip-animation="scale"
>
Light & animated
`html`
amply-tooltip
amply-tooltip-text="Click to toggle!"
amply-tooltip-trigger="click"
>
Click me
`html`
amply-tooltip
amply-tooltip-html="Rich content with HTML"
amply-tooltip-interactive="true"
amply-tooltip-max-width="200"
>
Hover for details
`html`
amply-tooltip
amply-tooltip-text="Delayed and slow"
amply-tooltip-delay="500"
amply-tooltip-duration="400"
>
Slow reveal
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"
`
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;
`
`bashInstall dependencies
pnpm install
Release
`bash
Create release (version bump + changelog + git tag)
pnpm run releasePush with tags
git push --follow-tags origin mainPublish to npm
pnpm publish
``MIT