{"id":14972554,"url":"https://github.com/coliff/popover-css-inspector","last_synced_at":"2025-10-26T19:31:34.507Z","repository":{"id":182938122,"uuid":"669386880","full_name":"coliff/popover-css-inspector","owner":"coliff","description":"A CSS Inspector for Bootstrap Popovers","archived":false,"fork":false,"pushed_at":"2025-01-01T08:49:34.000Z","size":251,"stargazers_count":7,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-31T23:01:50.047Z","etag":null,"topics":["bootstrap5","hacktoberfest","inspector","style-guide"],"latest_commit_sha":null,"homepage":"https://coliff.github.io/popover-css-inspector/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coliff.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":".github/SUPPORT.md","governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"coliff","ko_fi":"coliff","custom":"https://paypal.me/coliff","thank.dev":"gh/coliff"}},"created_at":"2023-07-22T05:43:19.000Z","updated_at":"2025-01-01T08:49:37.000Z","dependencies_parsed_at":"2023-07-22T07:09:30.602Z","dependency_job_id":"fec70ad0-c6d8-47f0-908f-ee4df59a27d5","html_url":"https://github.com/coliff/popover-css-inspector","commit_stats":{"total_commits":60,"total_committers":2,"mean_commits":30.0,"dds":0.2833333333333333,"last_synced_commit":"5f12d1cbd57635842db406303ff0e2cdb7452c0a"},"previous_names":["coliff/popover-css-inspector"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fpopover-css-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fpopover-css-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fpopover-css-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coliff%2Fpopover-css-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coliff","download_url":"https://codeload.github.com/coliff/popover-css-inspector/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap5","hacktoberfest","inspector","style-guide"],"created_at":"2024-09-24T13:47:06.998Z","updated_at":"2025-10-26T19:31:34.501Z","avatar_url":"https://github.com/coliff.png","language":"JavaScript","funding_links":["https://github.com/sponsors/coliff","https://ko-fi.com/coliff","https://paypal.me/coliff","gh/coliff"],"categories":[],"sub_categories":[],"readme":"[![LICENSE](https://img.shields.io/badge/license-MIT-lightgrey.svg)](https://raw.githubusercontent.com/coliff/popover-css-inspector/main/LICENSE)\n[![GitHub Super-Linter](https://github.com/coliff/popover-css-inspector/workflows/Lint%20Code%20Base/badge.svg)](https://github.com/marketplace/actions/super-linter)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![npm Version](https://img.shields.io/npm/v/popover-css-inspector)](https://www.npmjs.com/package/popover-css-inspector)\n[![npm Downloads](https://img.shields.io/npm/dt/popover-css-inspector.svg)](https://www.npmjs.com/package/popover-css-inspector)\n\n# Popover CSS Inspector\n\nDisplays CSS attributes of elements in a Bootstrap popover. Ideal for design systems and style guides.\n\n- 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))\n- Customizable with your own CSS and Bootstrap's [Popover options](https://getbootstrap.com/docs/5.3/components/popovers/#options)\n- Popover remains static on the document and does not reposition on scroll\n- Supports Bootstrap 5 dark mode\n- [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\n- [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\n- 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\n- Supports optional title with `data-bs-title` attribute.\n- Only 3 KB minified and gzipped!\n\n![Popover CSS Inspector](.github/social-preview.png)\n\n## Quick start\n\nSeveral quick start options are available:\n\n- [Download the latest release](https://github.com/coliff/popover-css-inspector/releases/latest)\n- Clone the repo `git clone https://github.com/coliff/popover-css-inspector.git`\n- Install with [npm](https://www.npmjs.com/package/popover-css-inspector) `npm install popover-css-inspector`\n- Install with [yarn](https://yarnpkg.com/en/package/popover-css-inspector) `yarn add popover-css-inspector`\n- Install with [Composer](https://packagist.org/packages/coliff/popover-css-inspector) `composer require coliff/popover-css-inspector`\n\n## Usage\n\n1. Add the `data-bs-custom-class=\"popover-css-inspector\"` to the element you'd like to show the popover on. For example, a button.\n\n```html\n\u003cbutton\n  type=\"button\"\n  class=\"btn btn-primary\"\n  data-bs-toggle=\"popover\"\n  data-bs-custom-class=\"popover-css-inspector\"\u003e\n  Button\n\u003c/button\u003e\n```\n\n2. Load the script (either async or defer is recommended):\n\n```html\n\u003cscript src=\"/js/popover-css-inspector.min.js\" defer\u003e\u003c/script\u003e\n```\n\n3. Some CSS properties are opt-in only. For example, to show border properties, add `data-css-inspector-show=\"border\"` to the element.\n\n4. All CSS properties can be hidden. For example, to hide font-size properties, add `data-css-inspector-hide=\"font-size\"` to the element.\n\n5. 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.\n\n## How it works\n\nThe 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.\n\n## Demo\n\n[Demo page](https://coliff.github.io/popover-css-inspector/)\n\n## List of CSS properties\n\nThese CSS properties are displayed by default unless their value is null or empty. You can also opt out with a `data-attribute` if needed.\n\n| Property             | Opt-out attribute                              |\n| -------------------- | ---------------------------------------------- |\n| `animation-duration` | `data-css-inspector-show=\"animation-duration\"` |\n| `animation-name`     | `data-css-inspector-show=\"animation-name\"`     |\n| `background-color`   | `data-css-inspector-hide=\"bg-color\"`           |\n| `border-radius`      | `data-css-inspector-hide=\"b-radius\"`           |\n| `color`              | `data-css-inspector-hide=\"color\"`              |\n| `font-size`          | `data-css-inspector-hide=\"font-size\"`          |\n| `font-style`         | `data-css-inspector-hide=\"font-style\"`         |\n| `font-weight`        | `data-css-inspector-hide=\"font-weight\"`        |\n| `height`             | `data-css-inspector-hide=\"height\"`             |\n| `margin`             | `data-css-inspector-hide=\"margin\"`             |\n| `max-height`         | `data-css-inspector-hide=\"max-height\"`         |\n| `max-width`          | `data-css-inspector-hide=\"max-width\"`          |\n| `opacity`            | `data-css-inspector-hide=\"opacity\"`            |\n| `padding`            | `data-css-inspector-hide=\"padding\"`            |\n| `text-align`         | `data-css-inspector-hide=\"text-align\"`         |\n| `text-transform`     | `data-css-inspector-hide=\"text-transform\"`     |\n| `width`              | `data-css-inspector-hide=\"width\"`              |\n\n_Note: Most attributes are hidden if the value is none or null._\n\n## List of opt-in CSS properties\n\n| Property              | Opt-in attribute                            |\n| --------------------- | ------------------------------------------- |\n| `accent-color`        | `data-css-inspector-show=\"accent-color\"`    |\n| `animation`           | `data-css-inspector-show=\"animation\"`       |\n| `appearance`          | `data-css-inspector-show=\"appearance\"`      |\n| `aspect-ratio`        | `data-css-inspector-show=\"aspect-ratio\"`    |\n| `background-image`    | `data-css-inspector-show=\"bg-image\"`        |\n| `background-position` | `data-css-inspector-show=\"bg-position\"`     |\n| `background-repeat`   | `data-css-inspector-show=\"bg-repeat\"`       |\n| `background-size`     | `data-css-inspector-show=\"bg-size\"`         |\n| `border`              | `data-css-inspector-show=\"border\"`          |\n| `border-bottom-color` | `data-css-inspector-show=\"b-bottom-color\"`  |\n| `border-color`        | `data-css-inspector-show=\"b-color\"`         |\n| `border-left-width`   | `data-css-inspector-show=\"b-left-width\"`    |\n| `border-style`        | `data-css-inspector-show=\"b-style\"`         |\n| `border-width`        | `data-css-inspector-show=\"b-width\"`         |\n| `box-shadow`          | `data-css-inspector-show=\"box-shadow\"`      |\n| `box-sizing`          | `data-css-inspector-show=\"box-sizing\"`      |\n| `color-scheme`        | `data-css-inspector-show=\"color-scheme\"`    |\n| `cursor`              | `data-css-inspector-show=\"cursor\"`          |\n| `display`             | `data-css-inspector-show=\"display\"`         |\n| `float`               | `data-css-inspector-show=\"float\"`           |\n| `font-family`         | `data-css-inspector-show=\"font-family\"`     |\n| `letter-spacing`      | `data-css-inspector-show=\"letter-spacing\"`  |\n| `line-break`          | `data-css-inspector-show=\"line-break\"`      |\n| `line-height`         | `data-css-inspector-show=\"line-height\"`     |\n| `list-style`          | `data-css-inspector-show=\"list-style\"`      |\n| `margin-bottom`       | `data-css-inspector-show=\"margin-bottom\"`   |\n| `margin-left`         | `data-css-inspector-show=\"margin-left\"`     |\n| `margin-right`        | `data-css-inspector-show=\"margin-right\"`    |\n| `margin-top`          | `data-css-inspector-show=\"margin-top\"`      |\n| `min-height`          | `data-css-inspector-show=\"min-height\"`      |\n| `min-width`           | `data-css-inspector-show=\"min-width\"`       |\n| `overflow`            | `data-css-inspector-show=\"overflow\"`        |\n| `padding`             | `data-css-inspector-show=\"padding\"`         |\n| `position`            | `data-css-inspector-show=\"position\"`        |\n| `text-align`          | `data-css-inspector-show=\"text-align\"`      |\n| `text-decoration`     | `data-css-inspector-show=\"text-decoration\"` |\n| `text-indent`         | `data-css-inspector-show=\"text-indent\"`     |\n| `text-shadow`         | `data-css-inspector-show=\"text-shadow\"`     |\n| `text-transform`      | `data-css-inspector-show=\"text-transform\"`  |\n| `text-wrap`           | `data-css-inspector-show=\"text-wrap\"`       |\n| `transform`           | `data-css-inspector-show=\"transform\"`       |\n| `transition`          | `data-css-inspector-show=\"transition\"`      |\n| `user-select`         | `data-css-inspector-show=\"user-select\"`     |\n| `vertical-align`      | `data-css-inspector-show=\"vertical-align\"`  |\n| `white-space`         | `data-css-inspector-show=\"white-space\"`     |\n| `word-break`          | `data-css-inspector-show=\"word-break\"`      |\n| `word-spacing`        | `data-css-inspector-show=\"word-spacing\"`    |\n| `word-wrap`           | `data-css-inspector-show=\"word-wrap\"`       |\n| `z-index`             | `data-css-inspector-show=\"z-index\"`         |\n\n## Browser support\n\nWorks well with all the browsers supported by [Bootstrap](https://getbootstrap.com/docs/5.3/getting-started/browsers-devices/#supported-browsers).\n\n## Credits\n\nCreated by Christian Oliff with help from GitHub Copilot.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fpopover-css-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoliff%2Fpopover-css-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoliff%2Fpopover-css-inspector/lists"}