{"id":21883187,"url":"https://github.com/pinjasaur/cuetip","last_synced_at":"2025-04-15T06:08:22.257Z","repository":{"id":58219742,"uuid":"60130780","full_name":"Pinjasaur/cuetip","owner":"Pinjasaur","description":"CSS-only tooltips","archived":false,"fork":false,"pushed_at":"2024-07-21T05:38:00.000Z","size":154,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-15T06:08:17.395Z","etag":null,"topics":["css","sass","tooltip","tooltips"],"latest_commit_sha":null,"homepage":"https://pinjasaur.github.io/cuetip/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Pinjasaur.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-05-31T23:36:00.000Z","updated_at":"2024-07-21T05:38:03.000Z","dependencies_parsed_at":"2024-07-21T05:47:12.204Z","dependency_job_id":null,"html_url":"https://github.com/Pinjasaur/cuetip","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinjasaur%2Fcuetip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinjasaur%2Fcuetip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinjasaur%2Fcuetip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pinjasaur%2Fcuetip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pinjasaur","download_url":"https://codeload.github.com/Pinjasaur/cuetip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249016627,"owners_count":21198833,"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":["css","sass","tooltip","tooltips"],"created_at":"2024-11-28T09:39:40.938Z","updated_at":"2025-04-15T06:08:22.233Z","avatar_url":"https://github.com/Pinjasaur.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg width=\"320\" src=\"docs/img/logo.png\" alt=\"cuetip\"\u003e\n\u003c/div\u003e\n\n# cuetip\n\n![Build Status](https://github.com/Pinjasaur/cuetip/actions/workflows/ci.yml/badge.svg)\n\nSimple CSS-only tooltips designed to be a dropped into your project.\n\nView the [docs][site] for a [live demo][demo] or to generate a [custom build][custom-build].\n\n## Getting Started\n\n### Browser Support\n\ncuetip relies on CSS3 [`calc()`][css-calc] which is [IE9+ (with no Opera Mini support)][ciu-calc].\n\n### Installation\n\n- Bower (Deprecated): `bower install cuetip`\n- Yarn (Recommended): `yarn add cuetip`\n- CDN via unpkg: https://unpkg.com/cuetip\n- [Latest release][latest]\n\nOnce in your project, you can use cuetip pre-built\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/cuetip.min.css\"\u003e\n```\n\nor as an `@import` in your Sass.\n```scss\n@import \"path/to/cuetip\";\n```\n\n### Usage\n\n- Start with your element that needs a tooltip:\n  ```html\n  \u003cspan\u003e\n    Lorem ipsum\n  \u003c/span\u003e\n  ```\n- Add the `[data-tooltip]` attribute:\n  ```html\n  \u003cspan data-tooltip=\"I'm a tooltip!\"\u003e\n    Lorem ipsum\n  \u003c/span\u003e\n  ```\n- Add any [position classes](#classes) if necessary:\n  ```html\n  \u003cspan class=\"tooltip--bottom\" data-tooltip=\"I'm a tooltip!\"\u003e\n    Lorem ipsum\n  \u003c/span\u003e\n  ```\n\n### Configuration\n\nVisit the [docs][site] to generate a [custom build][custom-build].\n\n#### Variables\nFor brevity, the following documentation implicity prefixes all variables with\n`$cuetip-`. You can always view the Sass variables directly in the\n[source][source].\n\n- `namespace`\n    - **Default**: `tooltip`\n    - **Description**: Sets the `[data-*]` attribute that holds the tooltip.\n- `class-prefix`\n    - **Default**: `tooltip--`\n    - **Description**: Sets the `class` prefix.\n- `no-tail`\n    - **Default**: `no-tail`\n    - **Description**: Sets the class used to disable a tooltip tail.\n- `default-position`\n    - **Default**: `top`\n    - **Description**: Sets the default tooltip position (top, right, bottom,\n    or left).\n- `has-tail`\n    - **Default**: `true`\n    - **Description**: Sets whether the tooltip has a tail (e.g. small triangle).\n- `cursor`\n    - **Default**: `inherit`\n    - **Description**: Sets the `cursor` value.\n- `z-index`\n    - **Default**: `9999`\n    - **Description**: Sets the `z-index` value.\n- `color-foreground`\n    - **Default**: `#fff`\n    - **Description**: Sets the foreground color (e.g. `color`) value.\n- `color-background`\n    - **Default**: `#000`\n    - **Description**: Sets the background color (e.g. `background-color`) value.\n- `padding`\n    - **Default**: `.25em`\n    - **Description**: Sets the `padding`.\n- `border-radius`\n    - **Default**: `.1em`\n    - **Description**: Sets the `border-radius`.\n- `tail-size`\n    - **Default**: `.25em`\n    - **Description**: Sets the size of the tooltip tail. `$cuetip-has-tail`\n    must be `true`.\n- `offset`\n    - **Default**: `.2em`\n    - **Description**: Sets the offset of the tooltip from its element.\n\n#### Classes\nYou can use classes in the form `\u003cprefix\u003e\u003cposition\u003e` where `\u003cprefix\u003e` is\n`$cuetip-class-prefix` and `\u003cposition\u003e` is one of the four CSS position\nkeywords: `top`, `right`, `bottom`, or `left`. This allows you to change the\ntooltip position on a per-instance basis.\n\nFor example, using the default configuration a `class` of `tooltip--left` would\nposition the tooltip to the left of the element.\n\nFurther, to disable a tooltip tail you can use a `class` of `tooltip--no-tail`.\n\n### Known Issues\n- CSS minifiers may optimize \u0026 restructure cuetip in such a way that some of the\n  functionality is broken. This is a known issue with [`csso`][csso] that can be\n  mitigated by disabling \"restructuring\" when optimizing. If you're using the\n  pre-built CSS or not minifying your CSS during your build process then this is\n  a non-issue.\n\n### Compatibility with Webfont Icons\nIf using icons that are implemented via `::before` pseudo-elements, such as Font\nAwesome, you can use cuetip on the same element as the icon by disabling the\ntooltip tail (e.g. add `class` of `tooltip--no-tail`). An example can be found\n[here][ex-fa].\n\nYou can also set the `$cuetip-has-tail` variable to `false` to disable tails\non all tooltips.\n\n## Thanks\n\nThanks to [@Ghosts][ghosts] for creating the logo.\n\n## License\n\n[MIT][license] \u0026copy; Paul Esch-Laurent\n\n[ex-fa]: https://codepen.io/Pinjasaur/pen/vRqOqZ\n[csso]: https://github.com/css/csso\n[css-calc]: https://developer.mozilla.org/en-US/docs/Web/CSS/calc\n[ciu-calc]: https://caniuse.com/#feat=calc\n[license]: https://pinjasaur.mit-license.org/2016\n[latest]: https://github.com/Pinjasaur/cuetip/releases/latest\n[source]: /src/cuetip.scss\n[site]: https://pinjasaur.github.io/cuetip/\n[custom-build]: https://pinjasaur.github.io/cuetip/customize\n[demo]: https://pinjasaur.github.io/cuetip/#demo\n[ghosts]: https://github.com/Ghosts\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinjasaur%2Fcuetip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinjasaur%2Fcuetip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinjasaur%2Fcuetip/lists"}