Overview

bp-popnote is a lightweight, self-contained popover component designed for desktop web applications. It works with any PHP page by including a single JS file — no Bootstrap, no jQuery, no build step required.

The companion BpPopnote.php class lets you render popover triggers and their content directly from PHP variables or database query results, handling ID generation, HTML escaping, and newline conversion automatically.

Files

That's it. No npm install, no composer, no bundler.

Quick Start

Plain HTML

<!-- 1. Add data attributes to any element -->
<span
  data-popover-title="Aspirin"
  data-popover-content="Analgesic, antipyretic, anti-inflammatory."
  data-popover-theme="warning"
>Aspirin</span>

<!-- 2. Include the script before </body> -->
<script src="bp-popnote.js"></script>

PHP + Database

<?php
require_once 'BpPopnote.php';
$drug = $pdo->query("SELECT * FROM drugs WHERE id = 1")->fetch();
?>

<!-- Inline short text -->
<?= BpPopnote::inline($drug['name'], $drug['indication'], ['theme' => 'warning']) ?>

<!-- Multi-page carousel from DB row -->
<?= BpPopnote::fromArray($drug['name'], 'Drug Info', [
    'Dosage'        => $drug['dosage'],
    'Contraindication' => $drug['contraindication'],
    'Interactions'  => $drug['interactions'],
], ['theme' => 'warning']) ?>

<!-- Script tag (call once, renders only once even if called multiple times) -->
<?= BpPopnote::script('/assets/bp-popnote.js') ?>

HTML Usage (data attributes)

Short inline content

<span
  data-popover-title="Title"
  data-popover-content="Short text or simple HTML"
  data-popover-theme="info"
>trigger text</span>

Large HTML block (single page)

<span data-popover-title="Title" data-popover-target="#my-note">trigger</span>

<template id="my-note">
  <table>...</table>
  <p>Any HTML here.</p>
</template>

Carousel (auto-detected)

Place two or more direct child <section> elements inside the <template>. The carousel activates automatically — no extra attribute needed.

<span
  data-popover-title="Step by Step"
  data-popover-target="#steps"
  data-popover-interval="4000"
>View Steps</span>

<template id="steps">
  <section>Step 1 content</section>
  <section>Step 2 content</section>
  <section>Step 3 content</section>
</template>

PHP Class Usage

BpPopnote::inline()

Short plain text or simple HTML. escape defaults to true.

BpPopnote::inline(
    'trigger label',
    'description text',
    ['title' => 'Tooltip Title', 'theme' => 'info']
)

BpPopnote::html()

Large HTML block. You assemble the HTML; escape defaults to false.

$html = '<table>...</table>';

BpPopnote::html($row['name'], $html, [
    'title' => 'Detail',
    'theme' => 'warning',
])

BpPopnote::carousel()

Multi-page carousel. Each array key becomes a page heading; values are HTML strings.

BpPopnote::carousel($emp['name'], 'Employee Info', [
    'Profile'     => '<p>...</p>',
    'Health'      => '<p>...</p>',
    'Review'      => '<p>...</p>',
], ['theme' => 'info', 'interval' => 4000])

BpPopnote::fromArray()

Pass a DB row directly. Every value is treated as plain text — htmlspecialchars + nl2br applied automatically. Each key becomes a carousel page heading.

BpPopnote::fromArray($product['name'], 'Product Detail', [
    'Category'    => $product['category'],
    'Description' => $product['description'],  // \n auto → <br>
    'Stock'       => $product['stock'],
], ['theme' => 'highlight'])

BpPopnote::script()

Outputs the <script> tag and optional global config. Safe to call multiple times — renders only once.

BpPopnote::script('/assets/bp-popnote.js', [
    'theme'       => 'dark',
    'maxWidth'    => '520px',
    'borderStyle' => 'solid',
    'carousel'    => ['interval' => 3000],
])

Themes

Set globally via PopoverConfig.set({ theme: 'info' }) or per-element via data-popover-theme / PHP 'theme' option.

Custom theme

PopoverConfig.addTheme('brand', {
  bg:          '#0a0f1e',
  titleColor:  '#f0a500',
  borderColor: '#f0a500',
});

Options Reference

data-* attributes (HTML)

PHP $options array keys

Global Config (JS)

PopoverConfig.set({
  theme:       'dark',      // default theme
  maxWidth:    '560px',
  offset:      8,           // px gap between trigger and popover
  fontSize:    '1rem',
  borderStyle: 'solid',    // solid | dashed | dotted
  placement:   'top',
  carousel: {
    animation: 'slide',    // slide | crossfade
    interval:  3000,       // ms; 0 = no auto-play
  },
});

Newline & HTML Handling

License

MIT License — free to use, modify, and distribute in personal and commercial projects.