{"id":15015824,"url":"https://github.com/sir-dunxalot/ember-tooltips","last_synced_at":"2025-05-16T06:06:55.978Z","repository":{"id":34051954,"uuid":"37834145","full_name":"sir-dunxalot/ember-tooltips","owner":"sir-dunxalot","description":"Easy and extendible tooltips for Ember components - http://sir-dunxalot.github.io/ember-tooltips/","archived":false,"fork":false,"pushed_at":"2023-03-18T17:45:26.000Z","size":6773,"stargazers_count":212,"open_issues_count":30,"forks_count":143,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-10T16:17:50.931Z","etag":null,"topics":["ember","ember-addon","ember-components","popover","tooltip"],"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/sir-dunxalot.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2015-06-22T02:19:34.000Z","updated_at":"2024-05-30T02:05:38.000Z","dependencies_parsed_at":"2024-06-18T12:35:56.271Z","dependency_job_id":"9cf2c559-98bb-449d-b63e-ddc726c60335","html_url":"https://github.com/sir-dunxalot/ember-tooltips","commit_stats":{"total_commits":717,"total_committers":76,"mean_commits":9.43421052631579,"dds":0.5913528591352859,"last_synced_commit":"ea6d2dd1c172a6fdbd528878ea55eb6db9e377e5"},"previous_names":[],"tags_count":76,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sir-dunxalot%2Fember-tooltips","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sir-dunxalot%2Fember-tooltips/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sir-dunxalot%2Fember-tooltips/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sir-dunxalot%2Fember-tooltips/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sir-dunxalot","download_url":"https://codeload.github.com/sir-dunxalot/ember-tooltips/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478190,"owners_count":22077676,"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":["ember","ember-addon","ember-components","popover","tooltip"],"created_at":"2024-09-24T19:48:00.433Z","updated_at":"2025-05-16T06:06:50.951Z","avatar_url":"https://github.com/sir-dunxalot.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Ember-tooltips (and popovers) [![Build Status](https://travis-ci.org/sir-dunxalot/ember-tooltips.svg?branch=master)](https://travis-ci.org/sir-dunxalot/ember-tooltips) [![npm](https://img.shields.io/npm/v/ember-tooltips.svg)](https://www.npmjs.com/package/ember-tooltips) [![Ember Observer Score](http://emberobserver.com/badges/ember-tooltips.svg)](http://emberobserver.com/addons/ember-tooltips)\n======\n\nRender tooltips and popovers on components and other HTML elements using HTMLBars.\n\n## Installation\n\n```sh\nember install ember-tooltips\n```\n\n## Upgrading from 2.x\n\nSee [UPGRADING-3.x.md](UPGRADING-3.x.md)\n\n## Documentation\n\nDocumentation for usage is below:\n\n- [Demo](http://sir-dunxalot.github.io/ember-tooltips/)\n- [Usage](#usage)\n  - [ember-tooltip](#ember-tooltip)\n  - [ember-popover](#ember-popover)\n- [Options](#options)\n  - [Setting defaults](#setting-defaults)\n- [Actions](#actions)\n- [Testing](#testing)\n  - [Test helpers](#test-helpers)\n    - [Importing test helpers](#importing-test-helpers)\n- [Accessibility](#accessibility)\n- [Development](#development)\n\n## Usage\n\nThis documentation is for the `3.x` version of ember-tooltips. For `2.x` documentation, please refer to the [2.x branch README](https://github.com/sir-dunxalot/ember-tooltips/tree/2.x).\n\n_Note_: The documentation below is up-to-date for Ember Octane Edition\nconventions. However, it is still valid to use earlier curly-bracket syntax too,\ne.g. `{{ember-tooltip text=\"Hello!\" onShow=(action 'someAction')}}`\n\n### Ember Tooltip\n\nThe easiest way to add a tooltip to any element is with the `\u003cEmberTooltip /\u003e` component:\n\n```hbs\n\u003cMyComponent\u003e\n  Hover for more info\n\n  \u003cEmberTooltip @text=\"Here is more info!\" /\u003e\n\u003c/MyComponent\u003e\n```\n\nOr in block form:\n\n```hbs\n\u003cMyComponent\u003e\n  Hover for more info\n\n  \u003cEmberTooltip\u003e\n    Here is the info in a tooltip!\n  \u003c/EmberTooltip\u003e\n\u003c/MyComponent\u003e\n```\n\nThe tooltip will always be rendered on its parent element unless you specify the `targetId` attribute:\n\n```hbs\n\u003cinput id=\"has-info-tooltip\" value=\"\" placeholder=\"Enter first name...\" /\u003e\n\n\u003cEmberTooltip @targetId=\"has-info-tooltip\"\u003e\n  Here is some more info\n\u003c/EmberTooltip\u003e\n```\n\nor the `targetElement` attribute:\n\n```hbs\n\u003cEmberTooltip @targetElement={{this.tooltipTargetElement}}\u003e\n  Here is some more info\n\u003c/EmberTooltip\u003e\n```\n\n\nTooltips and popovers are lazy rendered. That means the are only rendered in the DOM once the user interacts with the [target element](#targetid).\n\nOptions can be set on the `\u003cEmberTooltip\u003e` as attributes:\n\n```hbs\n\u003cMyComponent\u003e\n  Click for more info\n\n  \u003cEmberTooltip @event=\"click\"\u003e\n    This info will show on click!\n  \u003c/EmberTooltip\u003e\n\u003c/MyComponent\u003e\n```\n\nDocumentation for supported options is located [here](#options).\n\n### Ember popover\n\nPopovers can be created with the `\u003cEmberPopover /\u003e` component, which is added to apps just like `\u003cEmberTooltip /\u003e`.\n\nPopovers support the same target behavior as tooltips; popovers will render on their parent element unless a `targetId` or `targetElement` is supplied.\n\nAll the [options](#options) passed to tooltip components can be passed to popover components:\n\n```hbs\n\u003cMyComponent\u003e\n  Click for more info\n\n  \u003cEmberPopover @event=\"click\"\u003e\n    This info will show in a popover on click!\n  \u003c/EmberPopover\u003e\n\u003c/MyComponent\u003e\n```\n\nPopovers also benefit from a `hide` API made publically acessible:\n\n```hbs\n\u003cEmberPopover as |popover|\u003e\n  \u003cbutton onClick={{action \"hide\" target=popover}} type=\"button\"\u003eClick here\u003c/button\u003e to hide the popover\n\u003c/EmberPopover\u003e\n```\n\nIn addition, a [popoverHideDelay](#popoverhidedelay) option is made available for popovers only.\n\n## Options\n\nOptions are set as attributes on the tooltip/popover components. Current tooltip/popover properties this addon supports are:\n\n- [animationDuration](#animationduration)\n- [arrowClass](#arrowclass)\n- [class](#class)\n- [delay](#delay)\n- [delayOnChange](#delayonchange)\n- [duration](#duration)\n- [effect](#effect)\n- [event](#event)\n- [hideOn](#hideon)\n- [innerClass](#innerclass)\n- [isShown](#isshown)\n- [popoverHideDelay (popover only)](#popoverhidedelay)\n- [popperContainer](#poppercontainer)\n- [popperOptions](#popperoptions)\n- [side](#side)\n- [showOn](#showon)\n- [spacing](#spacing)\n- [targetId](#targetid)\n- [targetElement](#targetelement)\n- [text](#text)\n- [tooltipClass](#tooltipclass)\n\n#### `animationDuration`\n\n| Type   | Default |\n|--------|---------|\n| Number | 200     |\n\nDefines the duration of tooltip animation in milliseconds. In testing, animation duration is always 0.\n\n```hbs\n\u003cEmberTooltip @animationDuration={{0}} /\u003e\n```\n\n#### `arrowClass`\n\n| Type    | Default         |\n|---------|-----------------|\n| String  | 'tooltip-arrow' |\n\nAdds extra classes to tooltip arrows.\n\nUsually used along with [`tooltipClass`](#tooltipclass).\n\n```hbs\n\u003cEmberTooltip @arrowClass=\"hoverhelp__arrow\" /\u003e\n```\n\nThis will create html similar to:\n```html\n\u003cdiv class=\"tooltip\"\u003e\n  \u003cdiv class=\"hoverhelp__arrow\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"tooltip-inner\"\u003e\u003c!-- content --\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### `class`\n\n| Type   | Default |\n|--------|---------|\n| String | none    |\n\nAdds a class to any tooltip wrapper:\n\n```hbs\n\u003cEmberTooltip class=\"tooltip-wrapper\" /\u003e\n```\n**Note:** This is usually not what you want, as the wrapper itself is hidden by default.\nYou are probably looking for [`tooltipClass`](#tooltipclass).\n\n#### `delay`\n\n| Type    | Default |\n|---------|---------|\n| Number  | 0       |\n\nDelays showing the tooltip by the given number of milliseconds.\n\n```hbs\n{{!--Delays the show animation by 500ms--}}\n\n\u003cEmberTooltip @delay={{500}} /\u003e\n```\n\nThis does not affect the hiding of the tooltip. See also, [delayOnChange](#delayonchange).\n\n#### `delayOnChange`\n\n| Type    | Default |\n|---------|---------|\n| Boolean | true    |\n\nWhether or not to enforce the delay even when the user transitions their cursor between multiple target elements with tooltips.\n\nSee this animation for a visual explanation:\n\n![](https://cloud.githubusercontent.com/assets/669410/15400803/d99f671e-1dba-11e6-8183-8b160cbcda10.gif)\n\n```hbs\n{{!--Forces delay to be enforced when the user skips\nbetween elements with tooltips--}}\n\n\u003cEmberTooltip @delayOnChange={{true}} /\u003e\n```\n\n#### `duration`\n\n| Type    | Default |\n|---------|---------|\n| Number  | 0       |\n\nSets the duration for which the tooltip will be open, in milliseconds. When the tooltip has been opened for the duration set it will hide itself.\n\nThe user will still hide the tooltip if the hide event occurs before the duration expires.\n\n```hbs\n{{!-- Closes the tooltip after 1000ms--}}\n\n\u003cEmberTooltip @duration={{1000}} /\u003e\n```\n\nLeave as `0` if you wish for the tooltip to remain open indefinitely.\n\n#### `effect`\n\n| Type    | Default |\n|---------|---------|\n| String  | 'slide' |\n\nSets the animation used to show and hide the tooltip. Possible options are:\n\n- `'fade'`\n- `'slide'`\n- `'none'`\n\n```hbs\n\u003cEmberTooltip @effect=\"slide\" /\u003e\n```\n\n#### `event`\n\n| Type    | Default |\n|---------|---------|\n| String  | 'hover' |\n\nThe event that the tooltip will hide and show for. Possible options are:\n\n- `'hover'`\n- `'click'`\n- `'focus'` (hides on blur)\n- `'none'`\n\n```hbs\n\u003cEmberTooltip @event=\"click\" /\u003e\n```\n\nThis event is overwritten by the individual [`hideOn`](#hideon) and [`showOn`](#showon) properties. In effect, setting `event` sets `hideOn` and `shownOn` for you.\n\nThe tooltip can also be shown programatically by passing in the `isShown` property, [documented here](#isshown).\n\n#### `hideOn`\n\n| Type    | Default |\n|---------|---------|\n| String  | 'none'  |\n\nSets the event that the tooltip will hide on. This overwrites any event set with the [event](#event) option.\n\nThis can be any javascript-emitted event.\n\n```hbs\n{{!--This tooltip will hide on mouseleave, NOT click--}}\n\n\u003cEmberTooltip\n  @event=\"click\"\n  @hideOn=\"mouseleave\"\n/\u003e\n```\n\nUsually, you'll use the `event` option, which sets `showOn` and `hideOn` automatically, instead of this option.\n\nThis option does not affect the event the tooltip shows on. That is set by the [showOn](#showon) option. This will override [the event property](#event) in deciding when the tooltip is hidden.\n\n#### `innerClass`\n\n| Type    | Default         |\n|---------|-----------------|\n| String  | 'tooltip-inner' |\n\nAdds extra classes to inner tooltips.\n\nUsually used along with [`tooltipClass`](#tooltipclass).\n\n```hbs\n\u003cEmberTooltip @innerClass=\"hoverhelp__inner\" /\u003e\n```\n\nThis will create html similar to:\n```html\n\u003cdiv class=\"tooltip\"\u003e\n  \u003cdiv class=\"tooltip-arrow\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"hoverhelp__inner\"\u003e\u003c!-- content --\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n#### `isShown`\n\n| Type    | Default |\n|---------|---------|\n| Boolean | false   |\n\nGives you a programatic way to hide and show a tooltip. Set this value to `true` to manually show the tooltip.\n\nThis can be useful alongside `event='none'` when you only want to toolip to show when you specific and not based on an user action.\n\n```hbs\n{{!--Binds the tooltip visibility to the showTooltip property--}}\n\u003cEmberTooltip @isShown={{this.showTooltip}} @event=\"none\" /\u003e\n```\n\n#### `popoverHideDelay`\n\n| Type    | Default  |\n|---------|----------|\n| Number  | 250      |\n\n**POPOVER ONLY:** The number of milliseconds before the popover will hide after the user hovers away from the popover and the popover target. This is only applicable when `event='hover'`.\n\n```hbs\n\u003cEmberPopover @event=\"hover\" @popoverHideDelay={{300}} /\u003e\n```\n\n![popover-hover](https://cloud.githubusercontent.com/assets/7050871/18113238/e010ee64-6ee2-11e6-9ff1-a0c674a6d702.gif)\n\n#### `popperContainer`\n\n| Type | Default |\n|------|---------|\n| `HTMLElement` \\| `String` \\| `false` | false |\n\nAppends the tooltip to a specific element.  By default, the tooltip will be rendered as a sibling of its target. This attribute can be set to render the tooltip elsewhere in the DOM.  See the [tooltip.js container option](https://popper.js.org/tooltip-documentation.html#new_Tooltip_new).\n\n```hbs\n{{!--Renders the tooltip as a child of the body element--}}\n\n\u003cEmberTooltip @popperContainer=\"body\" /\u003e\n```\n\n#### `popperOptions`\n\n| Type    | Default  |\n|---------|----------|\n| Object  | null     |\n\nSets the `popperOptions` on the underlying `tooltip.js` instance. Currently, only\noverriding `modifiers` is supported. See popper.js documentation for\n[more information on available modifiers](https://popper.js.org/popper-documentation.html#modifiers).\n\nThis can be used to customize various aspects of tooltip rendering and override\ncertain `popper.js` defaults set by `ember-tooltips`. For example, using a tooltip\ninside of an absolutely or relatively positioned container with overflow constraints,\nyou may want to disable `preventOverflow.escapeWithReference`.\n\n```js\n/* app/components/some-component.js */\nimport Component from '@ember/component';\n\nexport default Component.extend({\n  popperOptions: {\n    modifiers: {\n      preventOverflow: {\n        escapeWithReference: false\n      }\n    }\n  },\n  /* ... other stuff */\n});\n```\n\n```hbs\n{{!-- app/templates/components/some-component.hbs` --}}\n\n\u003cdiv class=\"my-scrollable-container\"\u003e\n  {{#each items as |item|}}\n    \u003cdiv class=\"row\"\u003e\n      {{item.text}}\n      \u003cEmberTooltip @text={{item.tooltip}} @popperOptions={{this.popperOptions}} /\u003e\n    \u003c/div\u003e\n  {{/each}}\n\u003c/div\u003e\n```\n\nNote that `popperOptions` is only applied during tooltip creation and that it is\nnot reapplied if the value changes after the tooltip is rendered.\n\n#### `side`\n\n| Type    | Default |\n|---------|---------|\n| String  | 'top'   |\n\nSets the side the tooltip will render on.\n\nPossible options are:\n\n- `'top'`\n- `'right'`\n- `'bottom'`\n- `'left'`\n\nIn addition, you may also specify `-start` and `-end` variants [supported by Popper.js](https://popper.js.org/popper-documentation.html#Popper.placements).\ne.g. `top-start` to position the tooltip from the top-left or `right-end` to\nposition from the bottom right.\n\n```hbs\n{{!--The tooltip will render on the right of the target element--}}\n\n\u003cEmberTooltip @side=\"right\" /\u003e\n```\n\n#### `showOn`\n\n| Type    | Default |\n|---------|---------|\n| String  | 'none'  |\n\nSets the event that the tooltip will show on. This overwrites any event set with the [event](#event) option.\n\nThis can be any javascript-emitted event.\n\n```hbs\n{{!--This tooltip will show on click, NOT hover--}}\n\n\u003cEmberTooltip @showOn=\"click\" /\u003e\n```\n\nUsually, you'll use the `event` option, which sets `showOn` and `hideOn` automatically, instead of this option.\n\nThis option does not affect the event the tooltip hides on. That is set by the [hideOn](#hide\non) option. This will override [the event property](#event) in deciding when the tooltip is shown.\n\n#### `spacing`\n\n| Type    | Default |\n|---------|---------|\n| Number  | 10      |\n\nSets the number of pixels the tooltip will render from the target element. A higher number will move the tooltip further from the target. This can be any number.\n\n```hbs\n{{!--Render the tooltip 20px from the target element--}}\n\u003cEmberTooltip @spacing={{20}} /\u003e\n```\n\n#### `targetId`\n\n| Type   | Default                              |\n|--------|--------------------------------------|\n| String | null (parent element of the tooltip) |\n\nThe concept of a 'target' is used through this addon. A target is the element that the tooltip or popover is attached to. Each tooltip or popvers has its own target. Interacting with this target will render and/or show the tooltip or popover. By default, the tooltip's target is the parent element.\nHowever, with `targetId`, you can specify another element's ID to attach the tooltip to another\nelement on the page.\n\nFor example, if you want to show a tooltip over a button when the user hovers over the button, the button is the target. If you want to show a popover over an input when the user focuses on the input, the input is the target.\n\n```hbs\n\u003cinput id=\"has-info-tooltip\" value=\"\" placeholder=\"Enter first name...\" /\u003e\n\n\u003cEmberTooltip @targetId=\"has-info-tooltip\"\u003e\n  Here is some more info\n\u003c/EmberTooltip\u003e\n```\n\n#### `targetElement`\n\n| Type    | Default                              |\n|---------|--------------------------------------|\n| Element | null (parent element of the tooltip) |\n\nThis behaves the same as the [target](#target) attribute, except is used to specify the target element itself, rather than a selector for finding the target element. If both `targetElement` and `targetId` are specified, `targetId` will take precedence.\n\n```hbs\n\u003cEmberTooltip @targetElement={{this.tooltipTargetElement}}\u003e\n  Here is some more info\n\u003c/EmberTooltip\u003e\n```\n\n#### `text`\n\n| Type    | Default |\n|---------|---------|\n| String  | null    |\n\nSets the text of any tooltip without needing the tooltip to be written in block form.\n\n```hbs\n\u003cMyComponent\u003e\n  Hover for more info\n\n  \u003cEmberTooltip @text=\"Here is more info!\" /\u003e\n\u003c/MyComponent\u003e\n```\n\n#### `tooltipClass`\n\n| Type    | Default         |\n|---------|-----------------|\n| String  | 'tooltip'       |\n\nAdds extra classes to tooltips.\n\nUseful to avoid conflicts with other libraries.\n\n```hbs\n\u003cEmberTooltip @tooltipClass=\"hoverhelp\" /\u003e\n```\n\nThis will create html similar to:\n```html\n\u003cdiv class=\"hoverhelp\"\u003e\n  \u003cdiv class=\"tooltip-arrow\"\u003e\u003c/div\u003e\n  \u003cdiv class=\"tooltip-inner\"\u003e\u003c!-- content --\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Setting Defaults\n\nYou can set the default for any option by extending the `\u003cEmberTooltip /\u003e` or `\u003cEmberPopover /\u003e` component:\n\n```js\n/* your-app/components/ember-tooltip.js */\n\nimport EmberTooltipComponent from 'ember-tooltips/components/ember-tooltip';\n\nexport default EmberTooltipComponent.extend({\n  effect: 'fade',\n  side: 'bottom',\n});\n```\n\n**Note**: Do not provide a template `hbs` file, when overriding/extending\n`ember-tooltips` or `ember-popover`, as this will override the template provided\nby the addon and prevent tooltip or popover content from appearing.\n\n## Actions\n\nFour actions are available for you to hook onto through the tooltip/popover lifecycle:\n\n```hbs\n\u003cEmberTooltip\n  @onDestroy={{action 'onDestroy'}}\n  @onHide={{action 'onHide'}}\n  @onRender={{action 'onRender'}}\n  @onShow={{action 'onShow'}}\n/\u003e\n```\n\n## Testing\n\n### Test helpers\n\nThis addon exposes testing helpers which can be used inside of the consuming app's acceptance and integration tests. We use a tooltip-centric naming convention but these can also be used to test popovers.\n\nPublically available test helpers are:\n\n- [assertTooltipContent()](#asserttooltipcontent)\n- [assertTooltipRendered()](#asserttooltiprendered)\n- [assertTooltipNotRendered()](#asserttooltipnotrendered)\n- [assertTooltipVisible()](#asserttooltipvisible)\n- [assertTooltipNotVisible()](#asserttooltipnotvisible)\n- [assertTooltipSide()](#asserttooltipside)\n- [assertTooltipSpacing()](#asserttooltipspacing)\n\nAll assert helpers require `assert` to be passed as the first param and some accept a second, optional param for additional test options.\nAll assert helpers work with both QUnit's `assert` and chai's `assert`.\n\nFor detailed usage instructions and examples, see the documentation for each test helper below.\n\nThere are currently two supported flavors of test helpers: one implementation\nuses jQuery and one uses the browser's DOM APIs (`querySelector`, etc.). The two\nshare the same APIs, with exception for the types of selectors they support.\n\nThe jQuery assertion test helpers support jQuery-specific pseudoselectors like\n`:contains`. However, as jQuery is now optional in Ember 3.4+ and the use-cases\nfor jQuery-specific selectors and the use of the library are small, these\nhelpers will likely be removed in the next major release of `ember-tooltips`.\n\nAll test helpers live under the following modules:\n\n```js\n// (Recommended) Auto-selection of either jQuery or DOM-based APIs, based\n// on @ember/optional-features and whether jquery-integration is enabled.\nimport { assertTooltipContent } from 'ember-tooltips/test-support';\n\n// Explicit path for DOM-based APIs\nimport { assertTooltipContent } from 'ember-tooltips/test-support/dom';\n\n// Explicit path for jQuery-based APIs (deprecated)\nimport { assertTooltipContent } from 'ember-tooltips/test-support/jquery';\n```\n\n#### Example\n\n```js\n/* appname/tests/integration/components/some-component.js */\n\nimport { module, test } from 'qunit';\nimport { setupRenderingTest } from 'ember-qunit';\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport hbs from 'htmlbars-inline-precompile';\n\nimport { assertTooltipRendered } from 'ember-tooltips/test-support';\n// Or, on ember-tooltips 3.3.0+ and not using jQuery:\n// import { assertTooltipRendered } from 'ember-tooltips/test-support/dom/assertions';\n\nmodule('Integration | Component | Some component', function(hooks) {\n  setupRenderingTest(hooks);\n\n  test('ember-tooltip renders', async function(assert) {\n\n    await render(hbs`\u003cEmberTooltip isShown={{true}} /\u003e`);\n\n    assertTooltipRendered(assert);\n  });\n});\n```\n\n#### assertTooltipContent()\n\nAsserts that a tooltip or popover has content that matches a given string.\n\n```js\nimport { assertTooltipContent } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip @text=\"More info\" @isShown={{true}} /\u003e`);\n\n  assertTooltipContent(assert, {\n    contentString: 'More info',\n  });\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`contentString`](#test-helper-option-contentstring)\n- [`selector`](#test-helper-option-selector)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### assertTooltipRendered()\n\nAsserts that a tooltip or popover has been rendered in the DOM.\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport { assertTooltipRendered } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip /\u003e`);\n\n  await triggerEvent(this.element, 'mouseenter');\n\n  assertTooltipRendered(assert);\n});\n```\n\nPlease note, `assertTooltipRendered()` does not assert that the tooltip or popover is visible to the user - use [assertTooltipVisible()](#asserttooltipvisible) for that.\n\nGiven this addon's lazy rendering capabilities (explained in [`targetId`](#targetid)), tooltips will not be rendered until the target is interacted with.\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### assertTooltipNotRendered()\n\nAsserts that a tooltip or popover has not been rendered in the DOM.\n\nWhy is this test helper useful? Well, given this addon's lazy rendering capabilities (explained in [`targetId`](#targetid)), tooltips may not be rendered until the target is interacted with.\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport { assertTooltipNotRendered } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip /\u003e`);\n\n  assertTooltipNotRendered(assert);\n});\n```\n\nThis helper does not assert that the tooltip or popover is not visible to the user. The assertion will fail if the tooltip or popover is not visible to the user but is still rendered in the DOM. If you want to assert that a tooltip or popover is not visible once it's rendered in the DOM, use [assertTooltipNotVisible()](#asserttooltipnotvisible).\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### assertTooltipVisible()\n\nAsserts that a tooltip or popover is visible.\n\nFor example:\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport { assertTooltipVisible } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip /\u003e`);\n\n  await triggerEvent(this.element, 'mouseenter');\n\n  assertTooltipVisible(assert);\n});\n```\n\nYou may use this helper with a variety of different user interactions. Here's an example that asserts that a tooltip is shown when the user focusses on an input:\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport { assertTooltipVisible } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\n    \u003cinput id=\"url-input\"\u003e\n    \u003cEmberTooltip @targetId=\"url-input\" /\u003e\n  `);\n\n  await triggerEvent('#url-input', 'focus');\n\n  /* Asserts that the tooltip is made visible when the user focuses on the input */\n\n  assertTooltipVisible(assert);\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### assertTooltipNotVisible()\n\nAsserts that a tooltip or popover is not visible.\n\nThis helper is usually used in conjunction with [triggerTooltipTargetEvent()](#triggertooltiptargetevent) to assert that a particular user interaction hides a tooltip to the user.\n\nFor example:\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport {\n  assertTooltipNotVisible,\n  assertTooltipVisible,\n} from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip /\u003e`);\n\n  const { element } = this;\n\n  /* Hover over the target to show the tooltip... */\n\n  await triggerEvent(element, 'mouseenter');\n\n  assertTooltipVisible(assert);\n\n  /* Stop hovering over the target in order to hide the tooltip... */\n\n  await triggerEvent(element, 'mouseleave');\n\n  assertTooltipNotVisible(assert);\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### assertTooltipSide()\n\nAsserts that a tooltip or popover is rendered on the correct side of [the target](#targetid).\n\nThis helper tests [the side option](#side) that can be passed to tooltips and popovers.\n\nAn options hash is required and it must contain a `side` property. For example:\n\n```js\nimport { assertTooltipSide } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip @side=\"right\" @isShown={{true}} /\u003e`);\n\n  /* Asserts that the tooltip is rendered but not shown when the user hovers over the target, which is this test's element */\n\n  assertTooltipSide(assert, {\n    side: 'right',\n  });\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n- [`side`](#test-helper-option-side)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### assertTooltipSpacing()\n\nAsserts that a tooltip or popover is rendered a given number of pixels from [the target](#targetid).\n\nThis helper tests [the spacing option](#spacing) that can be passed to tooltips and popovers.\n\nAn options hash is required and it must contain `spacing` and `side` properties. For example:\n\n```js\nimport { assertTooltipSpacing } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip @spacing={{35}} @isShown={{true}} /\u003e`);\n\n  /* Asserts that the tooltip is rendered but not shown when the user hovers over the target, which is this test's element */\n\n  assertTooltipSpacing(assert, {\n    side: 'right', /* Side is required */\n    spacing: 35,\n  });\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n- [`side`](#test-helper-option-side)\n- [`spacing`](#test-helper-option-spacing)\n- [`targetSelector`](#test-helper-option-targetselector)\n\n### Test helper options\n\nMost test helpers accept a second, optional param called `options`. This is an object you can pass that customizes various options in a test. The properties you can pass via `options` for each test helper is listed above. Below you will find more information for each property.\n\n- [Content string](#test-helper-option-contentstring)\n- [Selector](#test-helper-option-selector)\n- [Side](#test-helper-option-side)\n- [Spacing](#test-helper-option-spacing)\n- [Target selector](#test-helper-option-targetselector)\n\n#### Test helper option: `contentString`\n\nThe content string you expect the tooltip or popover to have.\n\n| Type    |Default  |\n|---------|---------|\n| String  | null    |\n\nUsage example:\n\n```js\nimport { assertTooltipContent } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip @text=\"More info\" @isShown={{true}} /\u003e`);\n\n  assertTooltipContent(assert, {\n    contentString: 'More info',\n  });\n});\n```\n\n#### Test helper option: `selector`\n\nThe selector of the tooltip or popover you are testing.\n\nIf more than one tooltip or popover is found in the DOM when you run an assertion, you will be asked to specify this.\n\n| Type    | Default |\n|---------|---------|\n| String  | `'.ember-tooltip, .ember-popover'` |\n\nUsage example:\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport { assertTooltipVisible } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\n    \u003cEmberTooltip /\u003e\n    \u003cEmberTooltip class=\"differentiator\" /\u003e\n  `);\n\n  await triggerEvent(this.element, 'mouseenter');\n\n  assertTooltipVisible(assert, {\n    selector: '.differentiator', /* Or whatever class you added to the desired tooltip */\n  });\n});\n```\n\n#### Test helper option: `side`\n\nThe value for the tooltip or popover's [`side` option](#side) that you are asserting.\n\n| Type    | Default  |\n|---------|----------|\n| String  | `null`   |\n\nFor example, if you specify for the tooltip or popover be shown on the right of the target using `side='right'`, you will pass `side: 'right'` in assertions that test side. Here is the code for this example:\n\n```js\nimport { assertTooltipSide } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip @side=\"right\" @isShown={{true}} /\u003e`);\n\n  /* Asserts that the tooltip is rendered but not shown when the user hovers over the target, which is this test's element */\n\n  assertTooltipSide(assert, {\n    side: 'right',\n  });\n});\n```\n\n#### Test helper option: `spacing`\n\nThe value for the tooltip or popover's [`spacing` option](#spacing) that you are asserting. Specify as a number of pixels expected (without a `px` unit).\n\n| Type    | Default  |\n|---------|----------|\n| Number  | `null`   |\n\nFor example, if you specify for the tooltip or popover be shown on the right of the target using `side='right'`, you will pass `side: 'right'` in assertions that test side. Here is the code for this example:\n\n```js\nimport { assertTooltipSide } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\u003cEmberTooltip @spacing={{35}} @isShown={{true}} /\u003e`);\n\n  /* Asserts that the tooltip is rendered but not shown when the user hovers over the target, which is this test's element */\n\n  assertTooltipSide(assert, {\n    side: 'right', /* Side is required */\n    spacing: 35,\n  });\n});\n```\n\n#### Test helper option: `targetSelector`\n\nThe selector of the target element of the tooltip or popover you are testing.\n\nIf more than one tooltip or popover is found in the DOM with a particular selector\nwhen you run an assertion, you will be asked to specify this.\n\n| Type    | Default  |\n|---------|----------|\n| String  | `'.ember-tooltip-target, .ember-popover-target'` |\n\nUsage example:\n\n```js\nimport { render, triggerEvent } from '@ember/test-helpers';\nimport { assertTooltipVisible } from 'ember-tooltips/test-support';\n\ntest('Example test', async function(assert) {\n\n  await render(hbs`\n    \u003cdiv class=\"target-a\"\u003e\n      \u003cEmberTooltip class=\"common-tooltip\" @side=\"top\" @isShown={{true}} @text=\"Hi\" @effect=\"none\" /\u003e\n    \u003c/div\u003e\n    \u003cdiv class=\"target-b\"\u003e\n      \u003cEmberTooltip class=\"common-tooltip\" @side=\"left\" @isShown={{true}} @text=\"Bye\" @effect=\"none\" /\u003e\n    \u003c/div\u003e\n  `);\n\n  assertTooltipVisible(assert, {\n    targetSelector: '.target-b', /* Or whatever class you added to the target element */\n  });\n});\n```\n\n## Accessibility\n\nThis addon aims to meet 508 compliance.\n\nElements with tooltips are given a `tabindex` attribute and when the element receives focus, the tooltip will show.\n\nAdditionally, the `aria-describedby`, `title`, `id`, and `role` attributes are managed by this addon.\n\nThere is always room for improvement and PRs to improve accessibility are welcome.\n\n## Development\n\nThis project is maintained by:\n\n[![Duncan Walker](https://avatars1.githubusercontent.com/u/4495352?s=70\u0026v=4)](https://github.com/sir-dunxalot) | [![Max Fierke](https://avatars3.githubusercontent.com/u/354236?s=70\u0026v=4)](https://github.com/maxfierke) |\n--- | --- |\n[Duncan Walker](https://github.com/sir-dunxalot) | [Max Fierke](https://github.com/maxfierke) |\n\nAll PRs and issues are welcome to the following branches:\n\n- `master` for `3.x` improvements and bug fixes\n- `2.x` for `2.x` improvements and bug fixes\n\nBefore starting work on a PR, please read the quick guide, [CONTRIBUTING](https://github.com/sir-dunxalot/ember-tooltips/blob/master/CONTRIBUTING.md), to save you time and energy!\n\n## Maintainer information\n\nTo release an update to the demo app (for maintainers only):\n\n```sh\ngit checkout master # make sure you're on master branch\nember github-pages:commit --message \"Some commit message\" # Builds the app\ngit push origin gh-pages:gh-pages # Deploys the app\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsir-dunxalot%2Fember-tooltips","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsir-dunxalot%2Fember-tooltips","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsir-dunxalot%2Fember-tooltips/lists"}