{"id":15015958,"url":"https://github.com/zestia/ember-async-tooltips","last_synced_at":"2025-04-12T09:30:54.208Z","repository":{"id":21046943,"uuid":"91679361","full_name":"zestia/ember-async-tooltips","owner":"zestia","description":"💬 Ember addon for rendering tooltips that require their content to be loaded asynchronously","archived":false,"fork":false,"pushed_at":"2025-02-19T09:02:09.000Z","size":8709,"stargazers_count":8,"open_issues_count":8,"forks_count":3,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-03-26T04:34:24.103Z","etag":null,"topics":["async","ember","tooltips"],"latest_commit_sha":null,"homepage":"","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/zestia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2017-05-18T10:13:53.000Z","updated_at":"2025-02-18T15:14:59.000Z","dependencies_parsed_at":"2023-02-14T11:45:24.115Z","dependency_job_id":"cc13e81e-41a2-47e9-beb6-48f2447a19e5","html_url":"https://github.com/zestia/ember-async-tooltips","commit_stats":{"total_commits":764,"total_committers":4,"mean_commits":191.0,"dds":0.3965968586387435,"last_synced_commit":"d8a4fe1783db6ea7ead413241f0ffa2e7432d82f"},"previous_names":["amk221/ember-async-tooltips"],"tags_count":128,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-async-tooltips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-async-tooltips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-async-tooltips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zestia%2Fember-async-tooltips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zestia","download_url":"https://codeload.github.com/zestia/ember-async-tooltips/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248545989,"owners_count":21122243,"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":["async","ember","tooltips"],"created_at":"2024-09-24T19:48:12.665Z","updated_at":"2025-04-12T09:30:54.199Z","avatar_url":"https://github.com/zestia.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @zestia/ember-async-tooltips\n\n[![Ember Observer][ember-observer-badge]][ember-observer-url]\n\n\u003c!-- [![GitHub Actions][github-actions-badge]][github-actions-url] --\u003e\n\n[npm-badge]: https://img.shields.io/npm/v/@zestia/ember-async-tooltips.svg\n[npm-badge-url]: https://www.npmjs.com/package/@zestia/ember-async-tooltips\n[github-actions-badge]: https://github.com/zestia/ember-async-tooltips/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/zestia/ember-async-tooltips/actions\n[ember-observer-badge]: https://emberobserver.com/badges/-zestia-ember-async-tooltips.svg\n[ember-observer-url]: https://emberobserver.com/addons/@zestia/ember-async-tooltips\n\n## Installation\n\n```\nember install @zestia/ember-async-tooltips\n```\n\nAdd the following to `~/.npmrc` to pull @zestia scoped packages from Github instead of NPM.\n\n```\n@zestia:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=\u003cYOUR_GH_TOKEN\u003e\n```\n\n## Demo\n\nhttps://zestia.github.io/ember-async-tooltips\n\n## Features\n\n- Manual positioning ✔︎\n- Automatic positioning ✔︎\n- Customisable show/hide delays ✔︎\n- Customisable reference element ✔︎\n- Customisable destination element ✔︎\n- Pre-loads any required data ✔︎\n- Tethers to element ✔︎\n\n## Notes\n\n- This addon intentionally does not come with any styles.\n- Currently ships with rudimentary positioning utils. The goal being to strip out positioning as a concern once CSS anchors have better support.\n- It is configured with [ember-test-waiters](https://github.com/emberjs/ember-test-waiters) so `await`ing in your test suite will just work.\n\n## Example\n\n```handlebars\n\u003cdiv\u003e\n  Hover over me\n\n  \u003cTooltip\u003e\n    Hello World\n  \u003c/Tooltip\u003e\n\u003c/div\u003e\n```\n\n## `Tooltip`\n\n### Arguments\n\n#### `@element`\n\nOptional. By default, the parent of the tooltip element is what causes the tooltip to show \u0026 hide, and is _also_ the element it will be positioned next to.\n\n#### `@destination`\n\nOptional. By default, tooltips are rendered in-place. Specify a destination if you want to render them in that element instead.\n\n#### `@attachTo`\n\nOptional. By default, tooltips will be positioned next to the element that caused them to display. Unless this argument is specified, in which case the tooltip will show when mousing over the element, but will then be positioned next to a _different_ element.\n\n#### `@show`\n\nOptional. By default, tooltips will display when hovering over the reference element. But you can use this argument to force a tooltip to display.\n\n#### `@showDelay`\n\nOptional. The show delay will prevent the tooltip from being shown until the specified milliseconds have passed after entering the reference element.\n\n#### `@hideDelay`\n\nOptional. The hide delay will prevent the tooltip from being hidden until the specified milliseconds have passed after leaving the reference element.\n\n#### `@useFocus`\n\nOptional. By default, tooltips will only show when hovering over the reference element. Use this argument to also show the tooltip when the reference element is focused.\n\n#### `@stickyID`\n\nOptional. You can group tooltips together with a sticky identifier. When a tooltip from a group of tooltips all with the same identifier is shown, then other tooltips in that group will show instantly - ignoring their show delay. The term sticky is used because it feels as if the tooltips are stuck open.\n\n#### `@stickyTimeout`\n\nOptional. When a group of tooltips is in sticky mode (and so they have no show delays), after a period of time they will revert back to their normal delays. Use this argument to tweak that behaviour.\n\n#### `@onLoad`\n\nOptional. When an element is hovered over, `@onLoad` will be fired. You can respond to this action by returning a promise. The result of that promise is available on the API. This is a good way preload any data required for the tooltip to display.\n\nIn the following example, there is a show delay of `300`ms before a tooltip will appear. But, _during that time_ it is loading some data which takes `50`ms. The actual show delay is reduced to `250`ms, so that the total delay remains at `300`ms.\n\n\u003cdetails\u003e\n  \u003csummary\u003eExample\u003c/summary\u003e\n\n```handlebars\n{{! application.gjs }}\n\u003cLinkTo @route='user' @model={{123}}\u003e\n  Preview user\n  \u003cUserTooltip @id={{123}} /\u003e\n\u003c/LinkTo\u003e\n```\n\n```handlebars\n{{! user-tooltip.gjs }}\n\u003cTooltip @showDelay={{300}} @onLoad={{fn this.loadUser @id}} as |tooltip|\u003e\n  {{tooltip.data.user.name}}\n\u003c/Tooltip\u003e\n```\n\n\u003c/details\u003e\n\n#### `@onShow`\n\nOptional. Fired after a tooltip has been rendered, _and_ any animations have been performed.\n\n#### `@onHide`\n\nOptional. Fired after any animations have been performed, _and_ the tooltip has been destroyed.\n\n#### `@eager`\n\nOptional. If `true`, `@onLoad` is fired when the mouse enters the reference element, this is so data required for the tooltip to display will arrive sooner. When `false`, `@onLoad` is fired when the tooltip displays. Defaults to `true`.\n\n#### `@position`\n\nOptional. Tooltips will be automatically positioned around the outside edge of the element if no `@position` is specified.\n\nFor example: If the element is positioned in the 'bottom left' of the viewport, then the tooltip will be displayed _above_, so as to remain visible.\n\nYou can use the arguments `@rows` and `@columns` to tweak how the positioning algorithm decides what 'bottom left' means. See the [positioning library](https://github.com/zestia/position-utils#zestiaposition-utils) for more information.\n\nYou can also set `@position` to be a function. It will receive the element's position in the viewport. You are then free to return an appropriate counter position for your tooltip.\n\n\u003cdetails\u003e\n  \u003csummary\u003eExample\u003c/summary\u003e\n\n```javascript\nposition(referencePosition) {\n  switch(referencePosition) {\n    case 'top right':\n      return 'left top';\n    // ...\n  }\n}\n```\n\n\u003c/details\u003e\n\n### API\n\n#### `hide`\n\nHides the tooltip (waiting for any animations), then un-renders it.\n\n#### `data`\n\nAny data that was loaded via `@onLoad`\n\n#### `error`\n\nAny error if the data was `@onLoad` failed\n\n# Animating\n\nIf your tooltips need to animate in and out, you can utilise these attributes:\n\n```css\n[data-showing='true'] {\n  animation: your-show-animation;\n}\n\n[data-showing='false'] {\n  animation: your-hide-animation;\n}\n```\n\nYou may want to alter animations for sticky tooltips:\n\n```css\n[data-sticky='true'] {\n  animation-name: none;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzestia%2Fember-async-tooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzestia%2Fember-async-tooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzestia%2Fember-async-tooltips/lists"}