{"_id":"@alexlafroscia/ember-tooltips","_rev":"2-62cdaa7bb6d738020f13a0ad09c32b10","name":"@alexlafroscia/ember-tooltips","dist-tags":{"latest":"2.9.3"},"versions":{"2.9.3":{"name":"@alexlafroscia/ember-tooltips","version":"2.9.3","description":"Easy and extendible tooltips for Ember","keywords":["ember-addon","tooltips","tooltip","popover","popovers","htmlbars"],"license":"MIT","author":"","directories":{"doc":"doc","test":"tests"},"repository":"","scripts":{"build":"ember build","start":"ember server","test":"ember try:each"},"dependencies":{"ember-cli-babel":"^6.3.0","ember-cli-htmlbars":"^2.0.1","ember-cli-sass":"^7.0.0","ember-tether":"^1.0.0"},"devDependencies":{"autoprefixer":"^6.7.2","broccoli-asset-rev":"^2.4.5","ember-ajax":"^3.0.0","ember-cli":"~2.14.2","ember-cli-dependency-checker":"^1.3.0","ember-cli-eslint":"^3.0.0","ember-cli-github-pages":"0.0.8","ember-cli-htmlbars-inline-precompile":"^0.4.3","ember-cli-inject-live-reload":"^1.4.1","ember-cli-postcss":"3.1.1","ember-cli-qunit":"^4.0.0","ember-cli-shims":"^1.1.0","ember-cli-sri":"^2.1.0","ember-cli-uglify":"^1.2.0","ember-code-snippet":"^2.0.0-alpha.1","ember-disable-prototype-extensions":"^1.1.2","ember-export-application-global":"^2.0.0","ember-getowner-polyfill":"1.2.2","ember-load-initializers":"^1.0.0","ember-resolver":"^4.0.0","ember-source":"~2.14.1","eslint-plugin-ember-suave":"^1.0.0","eslint-plugin-netguru-ember":"^1.6.5","loader.js":"^4.2.3"},"engines":{"node":"^4.5 || 6.* || >= 7.*"},"ember-addon":{"configPath":"tests/dummy/config","demoURL":"http://sir-dunxalot.github.io/ember-tooltips/"},"gitHead":"52928b898a692cff3440769af32863db947acb36","_id":"@alexlafroscia/ember-tooltips@2.9.3","_npmVersion":"6.1.0","_nodeVersion":"10.5.0","_npmUser":{"name":"alexlafroscia","email":"alex@lafroscia.com"},"dist":{"integrity":"sha512-owSD175igft9I1FqFc+GzjZ/mPeuv7KKZLB49aIMsByZakzCurNv6pOzU/P8My4PixCGOtVTeQ7Nu5hXAWfjcg==","shasum":"d416e5bfc64e9127d1b1635467cdab93eda531e2","tarball":"https://registry.npmjs.org/@alexlafroscia/ember-tooltips/-/ember-tooltips-2.9.3.tgz","fileCount":29,"unpackedSize":76687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbVm1OCRA9TVsSAnZWagAA020P/3vjmtm9R5cR+q0TLYla\nU4CaFewKNIA86CbBW5jcxGbo8iWb5XxNxbTBJYVbLVFrGGjrLMGtsEE5MSy1\n/wp+Mc7HUjpaXkMdqlOzkJUG4v1rv1MbRTKJ7a+KQRh6VSEi0CQPuYttZK3x\nymcWvFXIpDRBLol+iAgRkl6d2AqGKqd77XIp955qohNHY5XB3TzHj0wTwE3p\nrWwpgmVrAZsqHywkp7Nvcm7gDwP+HuVY2Y9wuhcnLYJ/CnqX7hiwqoiu0dzI\n8Z/O5eC/OT0sxgnAAG5T59v+ntX3p4Lncy6mNeC3WKHs1F89+k18t1SV93/C\nU40zwkMJg83t0ntT4SlnqQEU0P6GpIHS4jehrDfW1cPuVM88IuTdHGOvWLQr\nmohgcfahr9u2wrhLBxUbvbyqWu+UWeIaAh3lGZXQWCbLYbVTDSa6a/zgOYAs\n0UROAPbXyp5m3Gj6I+dCJZRNl3Cy8ph9s3VURb25NR9+rqCwmssCHTXpRsGk\nbgx4YXs/DEPdsdpJYtfTvbEpcVyhffQsvb5kJqz/VCF/cD8f3O6yPgClFSDi\nabtrO4T2rBcPDOO+nMNEUREV83uXCK7AYKAfbbd3S9Pvgf8ZzEJMgf9/pnPK\nnwExiHf4/T3HjY0AR1xNJt2uT4j5QT20DYIg9hKEDKn542fjaZD+34IJ/F2X\naDBS\r\n=m36j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCvmUb4pm022W2eJiN2CXZMCSOulglHnWjjikHgDromwIgZstGN+QL28rLPwKtfdYaRV3LYsOpj0eN+kjsgKY4huY="}]},"maintainers":[{"name":"alexlafroscia","email":"alex@lafroscia.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ember-tooltips_2.9.3_1532390734321_0.0010797929152179808"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-24T00:05:34.077Z","2.9.3":"2018-07-24T00:05:34.390Z","modified":"2022-04-04T12:41:03.430Z"},"maintainers":[{"email":"jason.mitchell.w@gmail.com","name":"jasonmit"},{"email":"alex@lafroscia.com","name":"alexlafroscia"},{"email":"offirgolan@gmail.com","name":"offirgolan"}],"description":"Easy and extendible tooltips for Ember","keywords":["ember-addon","tooltips","tooltip","popover","popovers","htmlbars"],"license":"MIT","readme":"Ember-tooltips (and popovers) [](https://travis-ci.org/sir-dunxalot/ember-tooltips) [](https://www.npmjs.com/package/ember-tooltips) [](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```\nember install ember-tooltips\n```\n\n## Documentation\n\nDocumentation for usage is below:\n\n- [Demo](http://sir-dunxalot.github.io/ember-tooltips/)\n- [3.0.0 Beta](#300-beta)\n- [1.0.0 Release](#100-release)\n- [2.4.0 Release](#240-release)\n- [Usage](#usage)\n - [tooltip-on-component](#tooltip-on-component)\n - [tooltip-on-element](#tooltip-on-element)\n - [popover-on-component](#popover-on-element)\n - [popover-on-element](#popover-on-element)\n - [Targets](#targets)\n- [Options](#options)\n - [Setting defaults](#setting-defaults)\n- [Actions](#actions)\n- [Testing](#testing)\n - [Test helpers](#test-helpers)\n- [Accessibility](#accessibility)\n\n## 3.0.0 Beta\n\nVersion `3.0.0` replaces the unreliable Tether library with a more robust positioning library.\n\nIn addition, the code base is simplified to make it easier to extend and customize.\n\nDocumentation for the `3.0.0-beta.x` is available [on this branch](https://github.com/sir-dunxalot/ember-tooltips/tree/remove-tether-dependency).\n\nYou can install the beta version using:\n\n```sh\nnpm install --save-dev ember-tooltips@3.0.0-beta.2\n```\n\nPlease [report any issues you come across](https://github.com/sir-dunxalot/ember-tooltips/issues/new). Thank you in advance!\n\n## 1.0.0 Release\n\nVersion 1.0.0 removed darsain/tooltip as a dependency, in favor of using custom Ember code.\n\nYou can use and see the pre-1.0 version on [this branch](https://github.com/sir-dunxalot/ember-tooltips/tree/pre-1.0). Alternatively, install `\"ember-tooltips\": \"0.7.0\"` in your `package.json`.\n\n## 2.4.0 Release\n\nVersion 2.4.0 introduces lazy rendering. Tooltips and popovers generally don't need to be rendered until the user has interacted with the `$target` element. Adding `enableLazyRendering=true` to your component will enable this feature. In version 3.0.0 `enableLazyRendering` will default to `true` and you'll be able to opt-out of lazy rendering as necessary.\n\n## Usage\n\n### Tooltip on Component\n\nThe easiest way to add a tooltip to any component is with the `{{tooltip-on-component}}` component:\n\n```hbs\n{{#my-component}}\n Hover for more info\n\n {{tooltip-on-component text='Here is more info!'}}\n{{/my-component}}\n```\n\nOr in block form:\n\n```hbs\n{{#my-component}}\n Hover for more info\n\n {{#tooltip-on-component}}\n Here is the info in a tooltip!\n {{/tooltip-on-component}}\n{{/my-component}}\n```\n\nOptions can be set on the `{{tooltip-on-component}}` as attributes:\n\n```hbs\n{{#my-component}}\n Click for more info\n\n {{#tooltip-on-component event='click'}}\n This info will show on click!\n {{/tooltip-on-component}}\n{{/my-component}}\n```\n\nDocumentation for supported options is located [here](#options).\n\n### Tooltip on Element\n\nIf you want to add a tooltip to an element that is not an Ember component, you can do so with `{{tooltip-on-element}}`.\n\nBy default, the tooltip will attach itself to its parent element:\n\n```hbs\n
\n Hover for more info\n\n {{tooltip-on-element text='Here is more info!'}}\n
\n```\n\nOr in block form:\n\n```hbs\n
\n Hover for more info\n\n {{#tooltip-on-element}}\n Here is the info in a tooltip!\n {{/tooltip-on-element}}\n
\n```\n\nYou can also specify the ID of the element to attach the tooltip to:\n\n```hbs\n{{input id='has-info-tooltip'}}\n\n{{#tooltip-on-element target='#has-info-tooltip'}}\n Here is some more info\n{{/tooltip-on-element}}\n```\n\nThe `target` property must be an ID, including the `#`.\n\n### Popover on Element\n\nPopovers can be created with `{{popover-on-element}}` and `{{popover-on-component}}` with the same `target` behavior as tooltips.\n\nThe same options passed to tooltip components can be passed to popover components. In addition, a [hideDelay](#hide-delay) option is made available for popovers only.\n\nPopovers also benefit from a `hide` API made publically acessible:\n\n```\n{{#popover-on-element as |popover|}}\n Click here to hide the popover\n{{/popover-on-element}}\n```\n\n## Targets\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.\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\nGiven this addon's lazy rendering capabilities, when `enableLazyRendering` is set to `true`, tooltips and popovers will not be rendered until the target is interacted with. As such, tooltips and popovers can be rendered by but not necessarily made visible by user events.\n\nSee [the `enableLazyRendering` option](#enable-lazy-rendering) for instructions on how to enable lazy rendering in your app.\n\n## Options\n\nOptions are set as attributes on the tooltip/popover components. Current tooltip/popover properties this addon supports are:\n\n- [class](#class)\n- [delay](#delay)\n- [delayOnChange](#delay-on-change)\n- [duration](#duration)\n- [effect](#effect)\n- [event](#event)\n- [hideOn](#hide-on)\n- [keepInWindow](#keep-in-window)\n- [side](#side)\n- [showOn](#show-on)\n- [spacing](#spacing)\n- [text (tooltip only)](#text)\n- [isShown](#is-shown)\n- [hideDelay (popover only)](#hide-delay)\n- [enableLazyRendering](#enable-lazy-rendering)\n\n#### Class\n\n| Type | String |\n|---------|---------|\n| Default | none |\n\nAdds a class to any tooltip:\n\n```hbs\n{{tooltip-on-component class='tooltip-warning'}}\n```\n\n#### Delay\n\n| Type | Number |\n|---------|---------|\n| Default | 0 |\n\nDelays showing the tooltip by the given number of milliseconds.\n\n```hbs\n{{!--Delays the show animation by 500ms--}}\n\n{{tooltip-on-component delay=500}}\n```\n\nThis does not affect the hiding of the tooltip. See also, [delayOnChange](#delay-on-change).\n\n#### Delay on change\n\n| Type | Boolean |\n|---------|---------|\n| Default | 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\n\n```hbs\n{{!--Forces delay to be enforced when the user skips\nbetween elements with tooltips--}}\n\n{{tooltip-on-component delayOnChange=true}}\n```\n\n#### Duration\n\n| Type | Number |\n|---------|---------|\n| Default | 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{{tooltip-on-component duration=1000}}\n```\n\n#### Effect\n\n| Type | String |\n|---------|---------|\n| Default | '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{{tooltip-on-component effect='slide'}}\n```\n\n#### Event\n\n| Type | String |\n|---------|---------|\n| Default | '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{{tooltip-on-component event='click'}}\n```\n\nThis event is overwritten by the individual [`hideOn`](#hide-on) and [`showOn`](#show-on) 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](#is-shown).\n\n#### Hide on\n\n| Type | String |\n|---------|---------|\n| Default | '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{{tooltip-on-component\n event='click'\n hideOn='mouseleave'\n}}\n```\n\nThis does not affect the event the tooltip shows on. That is set by the [showOn](#show-on) option. This will override [the event property](#event).\n\n#### Keep in window\n\n| Type | Boolean |\n|---------|---------|\n| Default | true |\n\nWhether to automatically try keep the tooltip in the window. This will override any `side` you set if the tooltip is rendered partically outside the window.\n\nFor example, a target element in the top-left of the screen with a tooltip's side set to `left` will probably render the tooltip on the right of the target element.\n\n```hbs\n{{!--Forces the tooltip to stay on the left even if\nit will render off-screen--}}\n\n{{tooltip-on-component\n keepInWindow=false\n side='right'\n}}\n```\n\n#### Side\n\n| Type | String |\n|---------|---------|\n| Default | 'top' |\n\nSets the side the tooltip will render on. If `keepInWindow` is set to `true`, `side` can be overwritten to keep the tooltip on screen.\n\nPossible options are:\n\n- `'top'`\n- `'right'`\n- `'bottom'`\n- `'left'`\n\n```hbs\n{{!--The tooltip will render on the right of the target element--}}\n\n{{tooltip-on-component\n side='right'\n}}\n```\n\n#### Show on\n\n| Type | String |\n|---------|---------|\n| Default | '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{{tooltip-on-component\n showOn='click'\n}}\n```\n\nThis does not affect the event the tooltip hides on. That is set by the [hideOn](#hide-on) option. This will override [the event property](#event).\n\n#### Spacing\n\n| Type | Number |\n|---------|---------|\n| Default | 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{{tooltip-on-component spacing=20}}\n```\n\n#### Text\n\n| Type | String |\n|---------|---------|\n| Default | null |\n\n**TOOLTIP ONLY:** Sets the text of any tooltip without needing the tooltip to be written in block form.\n\n```hbs\n{{#my-component}}\n Hover for more info\n\n {{tooltip-on-component text='Here is more info!'}}\n{{/my-component}}\n```\n\n#### Is Shown\n\n| Type | Boolean |\n|---------|---------|\n| Default | 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{{tooltip-on-component isShown=true}}\n```\n\n#### Hide delay\n\n| Type | Number |\n|---------|---------|\n| Default | 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{{popover-on-component event='hover' hideDelay=300}}\n```\n\n\n\n#### Enable Lazy Rendering\n\n| Type | Boolean |\n|---------|---------|\n| Default | false (will be true in 3.0.0) |\n\nIf enabled tooltips and popovers will only be rendered when a user has interacted with the `$target` element or when `isShown=true`. This delay in render time is especially useful when many tooltips exist in a page.\n\n### Setting Defaults\n\nYou can set the default for any option by extending the `{{tooltip-on-element}}` component:\n\n```js\n{{!--your-app/components/tooltip-on-element}}--}}\n\nimport TooltipOnElementComponent from 'ember-tooltips/components/tooltip-on-element';\n\nexport default TooltipOnElementComponent.extend({\n effect: 'fade',\n side: 'bottom',\n enableLazyRendering: true,\n});\n```\n\n## Actions\n\nFour actions are available for you to hook onto through the tooltip/popover lifecycle:\n\n```hbs\n{{tooltip-on-component\n onDestroy='onDestroy'\n onHide='onHide'\n onRender='onRender'\n onShow='onShow'\n}}\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- [triggerTooltipTargetEvent()](#triggertooltiptargetevent)\n\nAll assert helpers require `assert` to be passed as the first param and some accept a second, optional param for additional test options. For detailed usage instructions and examples, see the documentation for each test helper below.\n\nAll test helpers can be imported from the following path:\n\n```js\n'appname/tests/helpers/ember-tooltips';\n```\n\nFor example:\n\n```js\n// appname/tests/integration/components/some-component.js\n\nimport {\n assertTooltipRendered,\n} from 'appname/tests/helpers/ember-tooltips';\nimport { moduleForComponent, test } from 'ember-qunit';\n\nmoduleForComponent('some-component', 'Integration | Component | Some', {\n integration: true,\n});\n\ntest('tooltip-on-element animates with a delay', function(assert) {\n\n // ... Test content...\n\n assertTooltipRendered(assert);\n\n // ... More test content...\n\n});\n```\n\n#### assertTooltipContent()\n\nAsserts that a tooltip or popover has content that matches a given string.\n\n```js\nimport {\n assertTooltipContent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element text='More info'}}`);\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) - REQUIRED\n- [`selector`](#test-helper-option-selector)\n\n#### assertTooltipRendered()\n\nAsserts that a tooltip or popover has been rendered in the DOM.\n\n```js\nimport {\n assertTooltipRendered,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element}}`);\n\n assertTooltipRendered(assert);\n});\n```\n\nThis 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 [Targets](#targets)), tooltips may not be rendered until the target is interacted with. As such, this helper is often used in conjunction with [triggerTooltipTargetEvent()](#triggertooltiptargetevent) to test those user events.\n\nFor example:\n\n```js\nimport {\n assertTooltipRendered,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element enableLazyRendering=true}}\n `);\n\n /* Tooltip won't be rendered in the DOM yet because enableLazyRendering delays the rendering until the user interacts with the target */\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\n\n /* Now the user has interacted with the target, so the tooltip should be rendered... */\n\n assertTooltipRendered(assert);\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\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 [Targets](#targets)), tooltips may not be rendered until the target is interacted with.\n\n```js\nimport {\n assertTooltipNotRendered,\n assertTooltipRendered,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element enableLazyRendering=true}}`);\n\n assertTooltipNotRendered(assert);\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\n\n assertTooltipRendered(assert);\n\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\n#### assertTooltipVisible()\n\nAsserts that a tooltip or popover is visible.\n\nThis helper is usually used in conjunction with [triggerTooltipTargetEvent()](#triggertooltiptargetevent) to assert that a particular user interaction shows a tooltip to the user.\n\nFor example:\n\n```js\nimport {\n assertTooltipVisible,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element}}`);\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\n\n /* Asserts that the tooltip is shown when the user hovers over the target, which is this test's element */\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 {\n assertTooltipVisible,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n \n {{tooltip-on-element target='url-input'}}\n `);\n\n triggerTooltipTargetEvent($('#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\nThis does not assert that the tooltip or popover is rendered in the DOM (regardless of visibility to the user) - use [assertTooltipRendered()](#asserttooltiprendered) for that.\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\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 {\n assertTooltipNotVisible,\n assertTooltipVisible,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element}}`);\n\n /* Hover over the target to show the tooltip... */\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\n\n assertTooltipVisible(assert);\n\n /* Stop hovering over the target in order to hide the tooltip... */\n\n triggerTooltipTargetEvent($(this), 'mouseleave');\n\n assertTooltipNotVisible(assert);\n\n});\n```\n\nThis helper is also used to assert that a tooltip is not visible even if it's been rendered in the DOM when this addon's [enableLazyRendering option](#enable-lazy-rendering) is enabled.\n\nFor example:\n\n```js\nimport {\n assertTooltipNotVisible,\n assertTooltipRendered,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element\n enableLazyRendering=true\n event='click'\n }}\n `);\n\n triggerTooltipTargetEvent($(this), 'click');\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 assertTooltipRendered(assert);\n\n assertTooltipNotVisible(assert);\n\n /* We'd probably go on to test that another user interaction - in this case clicking this test's element - makes the tooltip visible using assertTooltipVisible() */\n\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\n\n#### assertTooltipSide()\n\nAsserts that a tooltip or popover is rendered on the correct side of [the target](#targets).\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 {\n assertTooltipSide,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element side='right'}}\n `);\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\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 });\n\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`side`](#test-helper-option-side) - REQUIRED\n- [`selector`](#test-helper-option-selector)\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](#targets).\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 {\n assertTooltipSpacing,\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element spacing=35}}\n `);\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\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, // SPACING IS REQUIRED\n });\n\n});\n```\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`side`](#test-helper-option-side) - REQUIRED\n- [`selector`](#test-helper-option-selector)\n- [`spacing`](#test-helper-option-spacing) - REQUIRED\n- [`targetSelector`](#test-helper-option-targetselector)\n\n#### triggerTooltipTargetEvent()\n\nTriggers an event on a tooltip or popover's [target](#targets).\n\nThis helper does not require `assert` to be passed. Instead, it requires a jQuery element and event name:\n\n```js\nimport {\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element}}`);\n\n triggerTooltipTargetEvent($(this), 'mouseenter');\n\n});\n```\n\nOther events can be passed for more complex interactions:\n\n```js\nimport {\n triggerTooltipTargetEvent,\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{input id='has-info-tooltip'}}\n\n {{#tooltip-on-element target='#has-info-tooltip' event='focus'}}\n Here is some more info\n {{/tooltip-on-element}}\n `);\n\n triggerTooltipTargetEvent($('#has-info-tooltip'), 'focus');\n\n /* Then we'd do something like assert that the tooltip has been rendered... */\n\n});\n```\n\nAllowed event names are:\n\n- `'mouseenter'`\n- `'mouseleave'`\n- `'click'`\n- `'focus'`\n- `'focusin'`\n- `'blur'`\n\nThe [options hash](#test-helper-options) accepts:\n\n- [`selector`](#test-helper-option-selector)\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- [Target selector](#test-helper-option-targetselector)\n- [Side](#test-helper-option-side)\n- [Spacing](#test-helper-option-spacing)\n- [Event](#test-helper-option-event)\n\n#### Test helper option: `contentString`\n\nThe content string you expect the tooltip or popover to have.\n\n| Type | String |\n|---------|---------|\n| Default | null |\n\nUsage example:\n\n```js\nimport { assertTooltipRendered } from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`{{tooltip-on-element test='More info'}}`);\n\n assertTooltipContent(assert, {\n contentString: 'More info',\n });\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 | String |\n|---------|---------|\n| Default | `'.ember-tooltip, .ember-popover'` |\n\nUsage example:\n\n```js\nimport { assertTooltipRendered } from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element class='test-tooltip'}}\n {{tooltip-on-element}}\n `);\n\n assertTooltipRendered(assert, {\n selector: '.test-tooltip',\n });\n});\n```\n\n#### Test helper option: `targetSelector`\n\nThe selector of the tooltip or popover target you are testing. See [Targets](#targets) for an explanation on what a 'target' is.\n\nIf more than one tooltip or popover target is found in the DOM when you run an assertion, you will be asked to specify this.\n\n| Type | String |\n|---------|---------|\n| Default | `'.ember-tooltip-or-popover-target'` |\n\nUsage example:\n\n```js\nimport { assertTooltipSpacing } from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n
\n {{tooltip-on-element}}\n
\n\n
\n {{tooltip-on-element}}\n
\n `);\n\n assertTooltipSpacing(assert, {\n targetSelector: '.test-target',\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 | String |\n|---------|---------|\n| Default | `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 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element side='right'}}\n `);\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 | Number |\n|---------|---------|\n| Default | `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 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element spacing='35'}}\n `);\n\n assertTooltipSpacing(assert, {\n spacing: 35,\n });\n});\n```\n\n#### Test helper option: `event`\n\nThe name of the event that you would like to trigger on an element.\n\n| Type | String |\n|---------|---------|\n| Default | `null` |\n\nUsually used to specify an event for showing/hiding tooltips and popovers:\n\n```js\nimport {\n triggerTooltipTargetEvent\n} from 'appname/tests/helpers/ember-tooltips';\n\ntest('Example test', function(assert) {\n\n this.render(hbs`\n {{tooltip-on-element event='click'}}\n `);\n\n triggerTooltipTargetEvent(assert, {\n event: 'click',\n });\n\n /* Now the tooltip should be visible! */\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 with 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\nAll PRs and issues are welcome.\n\n- `git clone https://github.com/sir-dunxalot/ember-tooltips.git`\n- `cd ember-tooltips`\n- `npm install && bower install`\n- `ember s`\n- `ember test`, `ember try:testall`, or the `/tests` route\n\nPlease include tests and documentation updates with any new features.\n\nYou do not need to bump the version when you have a PR.\n\nTo release an update to the demo app:\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","readmeFilename":"README.md"}