Search by

coliff / popover-css-inspector

coliff

Displays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides

Package info

github.com/coliff/popover-css-inspector

Homepage

Documentation

Language:JavaScript

pkg:composer/coliff/popover-css-inspector

Security

Advisories: 0

Aikido package health analysis

Transparency log

Fund package maintenance!

Paypal

Statistics

Installs: 5

Dependents: 0

Suggesters: 0

Stars: 8

Open Issues: 3

v1.0.0-beta21 2026-04-14 01:47 UTC

Requires

None

Requires (Dev)

None

Suggests

None

Provides

None

Conflicts

None

Replaces

None

MIT fa85feb87725fb35eeebbe5093e7f147a6086844

cssbootstrapstyleinspector

Published on Packagist.org on 2026-04-14 01:49 UTC

This package is auto-updated.

Last update: 2026-09-24 09:07:26 UTC

README

LICENSE GitHub Super-Linter code style: prettier npm Version npm Downloads

Popover CSS Inspector

Displays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides.

  • Easy to use - just add data-bs-custom-class="popover-css-inspector" to the element (requires Bootstrap 5 JavaScript)
  • Customizable with your own CSS and Bootstrap's Popover options
  • Popover remains static on the document and does not reposition on scroll
  • Supports Bootstrap 5 dark mode
  • Option to hide CSS elements - e.g. just add data-css-inspector-hide="font-size" to prevent font-size properties from displaying
  • Some CSS properties are hidden by default but can be enabled - e.g. just add data-css-inspector-show="border" to show border properties
  • Reloads CSS attributes if the theme is changed via the data-bs-theme attribute - perfect for checking color value changes between light and dark mode
  • Supports optional title with data-bs-title attribute.
  • Only 3 KB minified and gzipped!

Popover CSS Inspector

Quick start

Several quick start options are available:

  • Download the latest release
  • Clone the repo git clone https://github.com/coliff/popover-css-inspector.git
  • Install with npm npm install popover-css-inspector
  • Install with yarn yarn add popover-css-inspector
  • Install with Composer composer require coliff/popover-css-inspector

Usage

  1. Add the data-bs-custom-class="popover-css-inspector" to the element you'd like to show the popover on. For example, a button.
<button
  type="button"
  class="btn btn-primary"
  data-bs-toggle="popover"
  data-bs-custom-class="popover-css-inspector">
  Button
</button>
  1. Load the script (either async or defer is recommended):
<script src="/js/popover-css-inspector.min.js" defer></script>

  1. Some CSS properties are opt-in only. For example, to show border properties, add data-css-inspector-show="border" to the element.

  2. CSS properties shown by default can be hidden. For example, to hide font-size properties, add data-css-inspector-hide="font-size" to the element.

  3. Optional. Consider adding the pe-none class to the element to prevent the popover from being triggered by the user.

How it works

The script looks for any element whose data-bs-custom-class attribute contains popover-css-inspector, reads the element's computed CSS properties, and displays them in a Bootstrap popover that is shown immediately. Popovers are refreshed automatically when matching elements are added, removed, or updated, or when the data-bs-theme attribute changes.

Demo

Demo page

List of CSS properties

These CSS properties are displayed by default unless their value is null or empty. You can opt out of these rows with data-css-inspector-hide.

Property Opt-out attribute
animation-duration data-css-inspector-hide="animation-duration"
animation-name data-css-inspector-hide="animation-name"
background-color data-css-inspector-hide="bg-color"
border-radius data-css-inspector-hide="b-radius"
color data-css-inspector-hide="color"
font-size data-css-inspector-hide="font-size"
font-style data-css-inspector-hide="font-style"
font-weight data-css-inspector-hide="font-weight"
height data-css-inspector-hide="height"
margin data-css-inspector-hide="margin"
max-height data-css-inspector-hide="max-height"
max-width data-css-inspector-hide="max-width"
opacity data-css-inspector-hide="opacity"
width data-css-inspector-hide="width"

Note: Most attributes are hidden if the value is none or null.

List of opt-in CSS properties

These CSS properties are hidden by default and are only shown when included in data-css-inspector-show.

Property Opt-in attribute
accent-color data-css-inspector-show="accent-color"
align-content data-css-inspector-show="align-content"
align-items data-css-inspector-show="align-items"
align-self data-css-inspector-show="align-self"
animation data-css-inspector-show="animation"
animation-delay data-css-inspector-show="animation-delay"
animation-direction data-css-inspector-show="animation-direction"
animation-fill-mode data-css-inspector-show="animation-fill-mode"
animation-iteration-count data-css-inspector-show="animation-iteration-count"
animation-play-state data-css-inspector-show="animation-play-state"
animation-timing-function data-css-inspector-show="animation-timing-function"
appearance data-css-inspector-show="appearance"
aspect-ratio data-css-inspector-show="aspect-ratio"
backdrop-filter data-css-inspector-show="backdrop-filter"
background-blend-mode data-css-inspector-show="background-blend-mode"
background-image data-css-inspector-show="bg-image"
background-position data-css-inspector-show="bg-position"
background-repeat data-css-inspector-show="bg-repeat"
background-size data-css-inspector-show="bg-size"
border data-css-inspector-show="border"
border-bottom-color data-css-inspector-show="b-bottom-color"
border-bottom-width data-css-inspector-show="b-bottom-width"
border-color data-css-inspector-show="b-color"
border-left-width data-css-inspector-show="b-left-width"
border-style data-css-inspector-show="b-style"
border-width data-css-inspector-show="b-width"
box-shadow data-css-inspector-show="box-shadow"
box-sizing data-css-inspector-show="box-sizing"
clip-path data-css-inspector-show="clip-path"
column-gap data-css-inspector-show="column-gap"
color-scheme data-css-inspector-show="color-scheme"
cursor data-css-inspector-show="cursor"
display data-css-inspector-show="display"
filter data-css-inspector-show="filter"
float data-css-inspector-show="float"
flex-direction data-css-inspector-show="flex-direction"
flex-wrap data-css-inspector-show="flex-wrap"
font-family data-css-inspector-show="font-family"
font-variant data-css-inspector-show="font-variant"
gap data-css-inspector-show="gap"
grid-auto-flow data-css-inspector-show="grid-auto-flow"
grid-column data-css-inspector-show="grid-column"
grid-row data-css-inspector-show="grid-row"
grid-template-columns data-css-inspector-show="grid-template-columns"
grid-template-rows data-css-inspector-show="grid-template-rows"
hyphens data-css-inspector-show="hyphens"
isolation data-css-inspector-show="isolation"
justify-items data-css-inspector-show="justify-items"
justify-self data-css-inspector-show="justify-self"
letter-spacing data-css-inspector-show="letter-spacing"
line-break data-css-inspector-show="line-break"
line-height data-css-inspector-show="line-height"
list-style data-css-inspector-show="list-style"
margin-bottom data-css-inspector-show="margin-bottom"
margin-left data-css-inspector-show="margin-left"
margin-right data-css-inspector-show="margin-right"
margin-top data-css-inspector-show="margin-top"
mix-blend-mode data-css-inspector-show="mix-blend-mode"
min-height data-css-inspector-show="min-height"
min-width data-css-inspector-show="min-width"
object-fit data-css-inspector-show="object-fit"
object-position data-css-inspector-show="object-position"
overflow data-css-inspector-show="overflow"
overflow-wrap data-css-inspector-show="overflow-wrap"
outline data-css-inspector-show="outline"
outline-offset data-css-inspector-show="outline-offset"
padding data-css-inspector-show="padding"
place-content data-css-inspector-show="place-content"
place-items data-css-inspector-show="place-items"
pointer-events data-css-inspector-show="pointer-events"
position data-css-inspector-show="position"
row-gap data-css-inspector-show="row-gap"
text-align data-css-inspector-show="text-align"
text-decoration data-css-inspector-show="text-decoration"
text-decoration-thickness data-css-inspector-show="text-decoration-thickness"
text-indent data-css-inspector-show="text-indent"
text-overflow data-css-inspector-show="text-overflow"
text-shadow data-css-inspector-show="text-shadow"
text-transform data-css-inspector-show="text-transform"
text-underline-offset data-css-inspector-show="text-underline-offset"
text-wrap data-css-inspector-show="text-wrap"
transform data-css-inspector-show="transform"
transform-origin data-css-inspector-show="transform-origin"
transition data-css-inspector-show="transition"
transition-delay data-css-inspector-show="transition-delay"
transition-duration data-css-inspector-show="transition-duration"
transition-property data-css-inspector-show="transition-property"
transition-timing-function data-css-inspector-show="transition-timing-function"
user-select data-css-inspector-show="user-select"
vertical-align data-css-inspector-show="vertical-align"
white-space data-css-inspector-show="white-space"
will-change data-css-inspector-show="will-change"
writing-mode data-css-inspector-show="writing-mode"
word-break data-css-inspector-show="word-break"
word-spacing data-css-inspector-show="word-spacing"
word-wrap data-css-inspector-show="word-wrap"
z-index data-css-inspector-show="z-index"

Browser support

Works well with all the browsers supported by Bootstrap.

Credits

Created by Christian Oliff with help from GitHub Copilot.