mym-peyda

A lightweight, standalone, and modular Popup & Tooltip library. It provides three interaction modes — click, hover, and Paradox (CK3) style lockable nested tooltips — under a single, unified architecture.

Features

• Three Interaction Modes
  • click: A locked popup that closes via manual dismissal or clicking outside.
  • hover: Classic tooltip behavior — appears on mouse enter, disappears on mouse leave.
  • paradox: Crusader Kings 3 inspired "wait and lock" mode. The popup locks after a short delay, allowing the cursor to enter the box and enabling nested tooltip chains.
• Template-Based Content: Target HTML templates by id or use inline (data-peyda-content) text/HTML.
• Pure CSS Transitions: Smooth open/close animations powered by opacity and transform.
• Zero Dependencies: Pure JavaScript and CSS — no external libraries required.
• Lightweight: Just one CSS file and one JS file.

Installation

NPM

npm install mym-peyda

import Peyda from "mym-peyda";
// or
const Peyda = require("mym-peyda");

CDN / Static

<link rel="stylesheet" href="src/peyda.css" />
<script src="src/peyda.js"></script>

Usage

Add the data-peyda-trigger attribute to your trigger elements, then call Peyda.init().

<!-- 1. Click Popup (content from template) -->
<button data-peyda-trigger="click" data-peyda-target="#popup-info">
  Open Info Popup
</button>

<!-- 2. Hover Tooltip (inline content) -->
<span data-peyda-trigger="hover" data-peyda-content="A short piece of info...">
  Hover Over Me
</span>

<!-- 3. Paradox / CK3 Tooltip (content from template) -->
<button data-peyda-trigger="paradox" data-peyda-target="#detail">
  Character Detail
</button>

<!-- Popup Content Templates -->
<div id="popup-info" class="peyda-popup-template">
  <div class="peyda-header">Title</div>
  <div class="peyda-body">Content goes here...</div>
  <div class="peyda-footer">
    <button class="peyda-close">Close</button>
  </div>
</div>

document.addEventListener("DOMContentLoaded", () => {
  Peyda.init();
});

API & Data Attributes

| Attribute | Description | Required | | -------------------- | --------------------------------------------- | -------- | | data-peyda-trigger | Interaction mode: click, hover, paradox | Yes | | data-peyda-target | CSS selector of the content template (#id) | No* | | data-peyda-content | Inline HTML or text content | No* |

* At least one of data-peyda-target or data-peyda-content must be provided. If both are missing, an empty popup will appear.

Modes in Detail

click

• Popup opens when the trigger is clicked.
• The popup automatically receives the locked class; the cursor can enter it, and internal buttons (e.g. .peyda-close) are interactive.
• Clicking outside the popup closes it.

hover

• Popup appears instantly when the cursor enters the trigger.
• Popup disappears instantly when the cursor leaves.
• Ideal for simple informational tooltips.

paradox

• When the cursor enters the trigger, the popup appears and shows a 800 ms loading animation (.loading).
• Once the timer completes, the popup becomes locked; the cursor can now enter the popup box.
• If the cursor leaves before the 800 ms timer finishes, the popup is destroyed immediately.
• A "bridge" detection system ensures the popup does not close while the cursor travels from the trigger to the popup across empty space.
• Nested tooltip chains are supported: a data-peyda-trigger="hover" element inside a locked popup can spawn its own tooltip.

CSS Classes

| Class | Description | | ----------------------- | -------------------------------------------------------- | | .peyda-popup-template | Hidden template container (invisible on page) | | .peyda-box | The generated popup box | | .peyda-box.active | Visible state (open animation) | | .peyda-box.locked | Locked state; mouse-interactive, golden border indicator | | .peyda-box.loading | Active loading animation during Paradox mode wait time | | .peyda-header | Popup header area | | .peyda-body | Popup body/content area | | .peyda-footer | Popup footer / button area | | .peyda-close | Close button (automatically wired in click mode) | | .peyda-loader-bar | Blue loading bar at the bottom during Paradox mode |

File Structure

mym-peyda/
├── src/
│   ├── peyda.css      # Core styles and animations
│   └── peyda.js       # Library logic
├── examples/
│   └── peyda.html     # Usage examples
├── package.json
├── readme.md
└── LICENSE

Development & Contributing

1. Clone the repository.
2. Open examples/peyda.html in a browser to test changes.
3. Make improvements in CSS or JS.
4. Submit a pull request.

License

MIT