{"id":13594514,"url":"https://github.com/zkreations/tooltips","last_synced_at":"2025-05-04T02:33:29.665Z","repository":{"id":59506669,"uuid":"61411771","full_name":"zkreations/tooltips","owner":"zkreations","description":"A lightweight and powerful solution that doesn't rely on JavaScript and compresses to just 0.7kb (Brotli). Easy to customize and implement, with no impact on performance.","archived":false,"fork":false,"pushed_at":"2024-04-05T23:36:42.000Z","size":338,"stargazers_count":32,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-06T00:28:21.011Z","etag":null,"topics":["css","nojs","sass","scss","tooltip"],"latest_commit_sha":null,"homepage":"https://zkreations.github.io/tooltips/","language":"SCSS","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/zkreations.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":"zkreations","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2016-06-18T01:44:37.000Z","updated_at":"2024-04-14T17:52:30.360Z","dependencies_parsed_at":"2022-09-18T07:35:47.560Z","dependency_job_id":"18453390-37d5-463d-989d-8333c783efec","html_url":"https://github.com/zkreations/tooltips","commit_stats":{"total_commits":38,"total_committers":3,"mean_commits":"12.666666666666666","dds":0.4736842105263158,"last_synced_commit":"01ceaa0f50223eccfa33b7b76043a9eb05fd1a33"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Ftooltips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Ftooltips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Ftooltips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zkreations%2Ftooltips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zkreations","download_url":"https://codeload.github.com/zkreations/tooltips/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224028292,"owners_count":17243693,"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","nojs","sass","scss","tooltip"],"created_at":"2024-08-01T16:01:34.841Z","updated_at":"2024-11-13T03:17:12.882Z","avatar_url":"https://github.com/zkreations.png","language":"SCSS","funding_links":["https://ko-fi.com/zkreations"],"categories":["SCSS"],"sub_categories":[],"readme":"\n# Tooltips.css\n\n\u003cimg width='100' src=\"https://raw.githubusercontent.com/zkreations/tooltips/master/.github/tooltips.svg?sanitize=true\" align=\"left\" /\u003e\n\n![J](https://img.shields.io/jsdelivr/npm/hm/@zkreations/tooltips?color=68D391) ![V](https://img.shields.io/npm/v/@zkreations/tooltips) ![L](https://img.shields.io/npm/l/@zkreations/tooltips) \n\n\nA lightweight and powerful solution that doesn't rely on JavaScript and compresses to just 0.7kb [Brotli](https://www.multiutil.com/text-to-brotli-compress/). Easy to customize and implement, with no impact on performance.\n\n## Installation\n\n### npm\n\n```\nnpm i @zkreations/tooltips\n```\n\n### cdn\n\n```html\n\u003clink href=\"https://cdn.jsdelivr.net/npm/@zkreations/tooltips@4/tooltips.min.css\" rel=\"stylesheet\"/\u003e\n```\n\n## How to use\n\nAdd the `data-tts` and `aria-label` attributes to an html element:\n\n```html\n\u003cspan data-tts aria-label=\"Hello world!\"\u003eTooltip\u003c/span\u003e\n```\n\n### Positioning\n\nIf no orientation is specified, the default value (up) will be used:\n\n```html\n\u003cspan data-tts=\"up\" aria-label=\"Up\"\u003eTop\u003c/span\u003e\n\u003cspan data-tts=\"left\" aria-label=\"Left\"\u003eLeft\u003c/span\u003e\n\u003cspan data-tts=\"right\" aria-label=\"Right\"\u003eRight\u003c/span\u003e\n\u003cspan data-tts=\"down\" aria-label=\"Down\"\u003eBottom\u003c/span\u003e\n```\n\nThe \"**up**\" and \"**down**\" orientations can be combined with \"**left**\" and \"**right**\":\n\n```html\n\u003cspan data-tts=\"up-left\" aria-label=\"Up Left\"\u003eUp Left\u003c/span\u003e\n\u003cspan data-tts=\"up-right\" aria-label=\"Up Right\"\u003eUp Right\u003c/span\u003e\n\u003cspan data-tts=\"down-left\" aria-label=\"Down Left\"\u003eDown Left\u003c/span\u003e\n\u003cspan data-tts=\"down-right\" aria-label=\"Down Right\"\u003eDown Right\u003c/span\u003e\n```\n\n### Animations\n\nAnimations can be created using **CSS variables** that affect the initial state:\n\n| Variable                | Default  | Description\n| ----------------------- | -------- | ------------\n| `--tts-start-scale`     | `1`      | Initial scale\n| `--tts-end-scale`       | `1`      | Final scale\n| `--tts-start-translate` | `0px`    | Initial position\n| `--tts-end-translate`   | `0px`    | Final position\n\nWith these variables, you can create animations, for example:\n\n```css\n.tts-slideIn {\n  --tts-start-translate: -1rem;\n}\n.tts-slideOut {\n  --tts-start-translate: 1rem;\n}\n.tts-zoomIn {\n  --tts-start-scale: .9;\n}\n.tts-zoomOut {\n  --tts-start-scale: 1.1;\n}\n```\n\nNow just add the classes to your animations:\n\n```html\n\u003cspan data-tts class=\"tts-slideIn\" aria-label=\"Slide In\"\u003eSlideIn\u003c/span\u003e\n\u003cspan data-tts class=\"tts-slideOut\" aria-label=\"Slide Out\"\u003eSlideOut\u003c/span\u003e\n\u003cspan data-tts class=\"tts-zoomIn\" aria-label=\"Zoom In\"\u003eZoomIn\u003c/span\u003e\n\u003cspan data-tts class=\"tts-zoomOut\" aria-label=\"Zoom Out\"\u003eZoomOut\u003c/span\u003e\n```\n\nYou can also define a **default animation** for all tooltips without using classes:\n\n```css\n[data-tts] {\n  --tts-start-translate: 1rem;\n  --tts-start-scale: .75;\n}\n```\n\n### Show programmable tooltip\n\nAdd the `data-tts-visible` class to display the tooltip at any time without the need for user interaction with the element. You can easily add this attribute using JavaScript.\n\n```html\n\u003cspan data-tts data-tts-visible aria-label=\"Programmatically Visible\"\u003eHello world\u003c/span\u003e\n```\n\n## Customize\n\nDefine new values for the tooltip's CSS variables to change its appearance. The available design variables are:\n\n| Variable              | Default              | Description\n| --------------------- | -------------------- | -------------\n| `--tts-background`    | rgb(0 0 0 / 90%)     | Background color\n| `--tts-arrow`         | 6px                  | Arrow size\n| `--tts-arrow-offset`  | 6px                  | Arrow offset (only for combined orientation)\n| `--tts-duration`      | 0.3s                 | Animation duration\n| `--tts-font-size`     | 14px                 | Font size\n| `--tts-font-family`   | Roboto, sans-serif   | Font family\n| `--tts-color`         | #fff                 | Font color\n| `--tts-padding`       | 0.5em 0.75em         | Padding\n| `--tts-border-radius` | 0.25em               | Border radius\n\nVariables allow you to create new themes that you can apply with your own classes:\n\n```css\n.tts-custom {\n  --tts-background: #607D8B;\n  --tts-border-radius: 1em;\n  --tts-duration: .5s;\n}\n```\n\nYou can also set **global styles** for all tooltips:\n\n```css\n[data-tts] {\n  --tts-background: #607D8B;\n  --tts-border-radius: 0px;\n}\n```\n\n## Notes\n\nTooltips **do not work with self-closing tags**, for example, `\u003cimg/\u003e` or `\u003cinput/\u003e`. To fix this, create a container and initiate the tooltip inside it:\n\n```html\n\u003cfigure data-tts aria-label=\"I am an image\"\u003e\n  \u003cimg src=\"example.jpg\"/\u003e\n\u003c/figure\u003e\n```\n\n## Supporting\n\nIf you want to help me keep this and more related projects always up to date, you can [buy me a coffee](https://ko-fi.com/zkreations) ☕. I will be very grateful 👏.\n\n## License\n\n**tooltips.css** is licensed under the MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkreations%2Ftooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzkreations%2Ftooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzkreations%2Ftooltips/lists"}