Toggle & Popup Components

Scholarly web components for interactive UI elements

Toggle Switch

A sliding toggle switch with smooth animations, keyboard accessibility, and form integration.

Basic Toggle

Default:
off
Initially checked:

With Labels

Left/Right labels:
off
Custom labels:

Size Variants

Small:
Medium (default):
Large:

States

Disabled (off):
Disabled (on):

Programmatic Control

API demo:

Event Log

Popup Info

An informational popup that appears on hover or click, with support for custom icons and pinning.

Basic Popup

Hover over the icon to see information This is a basic popup with the default question mark icon. It appears when you hover and disappears when you move away. about this feature.

Icon Variants

Default icon:
Default question mark SVG icon.
Font Awesome:
Using Font Awesome's info circle icon. A helpful tip with a lightbulb! Warning: This is important!
Emoji icons:
A bright idea! Caution advised. Reference material available. Key point to remember.

Positions

Right (default):
Popup appears to the right of the icon.
Left:
Popup appears to the left of the icon.
Top:
Popup appears above the icon.
Bottom:
Popup appears below the icon.

Pinnable Popups

Click to pin this popup open Pinned popup!

Click the icon again or click outside to unpin. This is useful for content that users might want to reference while interacting with other parts of the page. — it will stay visible until you click again or click outside.

Click Trigger

This popup only responds to clicks Click-only popup. It won't appear on hover, only when you click the icon. Click the icon again to close. — hover won't work here.

Rich Content

Popups can contain
Rich HTML Content

Popups support various HTML elements:
  • Bold and italic text
  • Links like this one
  • Code: const x = 42;
Tip: Click to pin this popup open.
rich HTML content including lists, links, and styled text.

Programmatic Control

API demo:
Controlled via JavaScript API!

Event Log

Usage

Installation

<!-- Combined bundle (both components) -->
<script src="dist/toggle-popup.min.js"></script>

<!-- Or individual components -->
<script src="dist/toggle-switch.min.js"></script>
<script src="dist/popup-info.min.js"></script>

Toggle Switch

<toggle-switch 
  label-left="Off" 
  label-right="On"
  checked>
</toggle-switch>

<script>
  const toggle = document.querySelector('toggle-switch');
  toggle.addEventListener('change', (e) => {
    console.log('Checked:', e.detail.checked);
  });
</script>

Popup Info

<popup-info pinnable emoji="💡">
  <strong>Pro tip:</strong> Click to pin this popup!
</popup-info>

<script>
  const popup = document.querySelector('popup-info');
  popup.addEventListener('popup-open', () => console.log('Opened'));
  popup.addEventListener('popup-close', () => console.log('Closed'));
</script>