PHPackages coliff/popover-css-inspector - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. coliff/popover-css-inspector ActiveLibrary[Utility & Helpers](/categories/utility) coliff/popover-css-inspector ============================ Displays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides v1.0.0-beta21(2mo ago)851[3 issues](https://github.com/coliff/popover-css-inspector/issues)MITJavaScriptCI passing Since Apr 8Pushed 1mo ago1 watchersCompare [ Source](https://github.com/coliff/popover-css-inspector)[ Packagist](https://packagist.org/packages/coliff/popover-css-inspector)[ Docs](https://github.com/coliff/popover-css-inspector#readme)[ Fund](https://paypal.me/coliff)[ RSS](/packages/coliff-popover-css-inspector/feed)WikiDiscussions main Synced today READMEChangelog (10)DependenciesVersions (14)Used By (0) [![LICENSE](https://camo.githubusercontent.com/891419a00e04aa0e311068fa8a04eec92cab4f7026c76278279bf2a1da50e578/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d6c69676874677265792e737667)](https://raw.githubusercontent.com/coliff/popover-css-inspector/main/LICENSE)[![GitHub Super-Linter](https://github.com/coliff/popover-css-inspector/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)[![code style: prettier](https://camo.githubusercontent.com/fa1096c501361805c36b519890a25f61cd45dde376718bb2f5af65a656f4c0fa/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f636f64655f7374796c652d70726574746965722d6666363962342e7376673f7374796c653d666c61742d737175617265)](https://github.com/prettier/prettier)[![npm Version](https://camo.githubusercontent.com/1530a82a0c9a8887c8b055f82ff9430eb4938f5b32328301eb9d25dde53c51a2/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f706f706f7665722d6373732d696e73706563746f72)](https://www.npmjs.com/package/popover-css-inspector)[![npm Downloads](https://camo.githubusercontent.com/754fe8414f58ca9f2b136803d9b34d008cef297de083671439ff1b6df8b4da9d/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f64742f706f706f7665722d6373732d696e73706563746f722e737667)](https://www.npmjs.com/package/popover-css-inspector) Popover CSS Inspector ===================== [](#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](https://getbootstrap.com/docs/5.3/getting-started/introduction/#quick-start)) - Customizable with your own CSS and Bootstrap's [Popover options](https://getbootstrap.com/docs/5.3/components/popovers/#options) - Popover remains static on the document and does not reposition on scroll - Supports Bootstrap 5 dark mode - [Option to hide CSS elements](#list-of-css-properties) - e.g. just add `data-css-inspector-hide="font-size"` to prevent font-size properties from displaying - [Some CSS properties are hidden by default](#list-of-opt-in-css-properties) 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](.github/social-preview.png)](.github/social-preview.png) Quick start ----------- [](#quick-start) Several quick start options are available: - [Download the latest release](https://github.com/coliff/popover-css-inspector/releases/latest) - Clone the repo `git clone https://github.com/coliff/popover-css-inspector.git` - Install with [npm](https://www.npmjs.com/package/popover-css-inspector) `npm install popover-css-inspector` - Install with [yarn](https://yarnpkg.com/en/package/popover-css-inspector) `yarn add popover-css-inspector` - Install with [Composer](https://packagist.org/packages/coliff/popover-css-inspector) `composer require coliff/popover-css-inspector` Usage ----- [](#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 ``` 2. Load the script (either async or defer is recommended): ``` ``` 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`](https://getbootstrap.com/docs/5.3/utilities/interactions/#pointer-events) class to the element to prevent the popover from being triggered by the user. How it works ------------ [](#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) [Demo page](https://coliff.github.io/popover-css-inspector/) List of CSS properties ---------------------- [](#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`. PropertyOpt-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"``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 ----------------------------- [](#list-of-opt-in-css-properties) These CSS properties are hidden by default and are only shown when included in `data-css-inspector-show`. PropertyOpt-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"``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-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-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 --------------- [](#browser-support) Works well with all the browsers supported by [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/#supported-browsers). Credits ------- [](#credits) Created by Christian Oliff with help from GitHub Copilot. ### Health Score 35 — LowBetter than 77% of packages Maintenance82 Actively maintained with recent releases Popularity10 Limited adoption so far Community13 Small or concentrated contributor base Maturity31 Early-stage or recently created project Bus Factor1 Top contributor holds 77.4% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~74 days Recently: every ~4 days Total 6 Last Release 80d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/a6068e9ba0ce8defec6b107f1cc3b99c2fd91f75298b48f71cc3dbfdc20870a8?d=identicon)[coliff](/maintainers/coliff) --- Top Contributors [![coliff](https://avatars.githubusercontent.com/u/1212885?v=4)](https://github.com/coliff "coliff (229 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (58 commits)")[![Copilot](https://avatars.githubusercontent.com/in/1143301?v=4)](https://github.com/Copilot "Copilot (7 commits)")[![Codex](https://avatars.githubusercontent.com/in/2248422?v=4)](https://github.com/Codex "Codex (2 commits)") --- Tags bootstrap5hacktoberfestinspectorstyle-guidecssstylebootstrapinspector ### Embed Badge ![Health badge](/badges/coliff-popover-css-inspector/health.svg) ``` [![Health](https://phpackages.com/badges/coliff-popover-css-inspector/health.svg)](https://phpackages.com/packages/coliff-popover-css-inspector) ``` ### Alternatives [twbs/bootstrap-sass bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications. 12.5k1.9M17](/packages/twbs-bootstrap-sass)[wenzhixin/bootstrap-table An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation) 11.8k287.3k1](/packages/wenzhixin-bootstrap-table)[onokumus/metismenu A jQuery menu plugin 2.0k271.0k5](/packages/onokumus-metismenu)[awssat/tailwindo Convert Bootstrap CSS to Tailwind CSS 1.1k20.4k1](/packages/awssat-tailwindo)[ttskch/select2-bootstrap4-theme Select2 v4 theme for Bootstrap4 43525.7k2](/packages/ttskch-select2-bootstrap4-theme)[phpstrap/phpstrap Bootstrap layout generator 1215.2k](/packages/phpstrap-phpstrap) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)