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!

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

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>

2. Load the script (either async or defer is recommended):

<script src="/js/popover-css-inspector.min.js" defer></script>

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

4. All CSS properties can be hidden. For example, to hide font-size properties, add data-css-inspector-hide="font-size" to the element.

5. 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 will look for any element with the data-bs-custom-class="css-inspector" attribute and add a click event listener to it. When clicked, it will get the element's CSS attributes and display them in a Bootstrap popover.

Demo

Demo page

List of CSS properties

These CSS properties are displayed by default unless their value is null or empty. You can also opt out with a data-attribute if needed.

Property	Opt-out attribute
animation-duration	data-css-inspector-show="animation-duration"
animation-name	data-css-inspector-show="animation-name"
background-color	data-css-inspector-hide="bg-color"
border-radius	data-css-inspector-hide="b-radius"
border-width	data-css-inspector-hide="b-width"
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"
padding	data-css-inspector-hide="padding"
text-align	data-css-inspector-hide="text-align"
text-transform	data-css-inspector-hide="text-transform"
width	data-css-inspector-hide="width"

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

List of opt-in CSS properties

Property	Opt-in attribute
accent-color	data-css-inspector-show="accent-color"
animation	data-css-inspector-show="animation"
appearance	data-css-inspector-show="appearance"
aspect-ratio	data-css-inspector-show="aspect-ratio"
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-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"
box-shadow	data-css-inspector-show="box-shadow"
box-sizing	data-css-inspector-show="box-sizing"
color-scheme	data-css-inspector-show="color-scheme"
cursor	data-css-inspector-show="cursor"
display	data-css-inspector-show="display"
float	data-css-inspector-show="float"
font-family	data-css-inspector-show="font-family"
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"
min-height	data-css-inspector-show="min-height"
min-width	data-css-inspector-show="min-width"
overflow	data-css-inspector-show="overflow"
padding	data-css-inspector-show="padding"
position	data-css-inspector-show="position"
text-align	data-css-inspector-show="text-align"
text-decoration	data-css-inspector-show="text-decoration"
text-indent	data-css-inspector-show="text-indent"
text-shadow	data-css-inspector-show="text-shadow"
text-transform	data-css-inspector-show="text-transform"
text-wrap	data-css-inspector-show="text-wrap"
transform	data-css-inspector-show="transform"
transition	data-css-inspector-show="transition"
user-select	data-css-inspector-show="user-select"
vertical-align	data-css-inspector-show="vertical-align"
white-space	data-css-inspector-show="white-space"
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.