<commit_before>Ember-tooltips (and popovers) [![Build Status](https://travis-ci.org/sir-dunxalot/ember-tooltips.svg)](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)
======

Render tooltips and popovers on components and other HTML elements using HTMLBars.

## Installation

```
ember install ember-tooltips
```

## Documentation

Documentation for usage is below:

- [Demo](http://sir-dunxalot.github.io/ember-tooltips/)
- [1.0.0 Release](#100-release)
- [2.4.0 Release](#240-release)
- [Usage](#usage)
  - [tooltip-on-component](#tooltip-on-component)
  - [tooltip-on-element](#tooltip-on-element)
  - [popover-on-component](#popover-on-element)
  - [popover-on-element](#popover-on-element)
- [Options](#options)
  - [Setting defaults](#setting-defaults)
- [Actions](#actions)
- [Accessibility](#accessibility)

## 1.0.0 Release

Version 1.0.0 removed <a href="http://darsa.in/tooltip/" target="_blank">darsain/tooltip</a> as a dependency, in favor of using custom Ember code.

You 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`.

## 2.4.0 Release

Version 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.

## Usage

### Tooltip on Component

The easiest way to add a tooltip to any component is with the `{{tooltip-on-component}}` component:

```hbs
{{#my-component}}
  Hover for more info

  {{#tooltip-on-component}}
    Here is the info in a tooltip!
  {{/tooltip-on-component}}
{{/my-component}}
```

Options can be set on the `{{tooltip-on-component}}` as attributes:

```hbs
{{#my-component}}
  Click for more info

  {{#tooltip-on-component event='click'}}
    This info will show on click!
  {{/tooltip-on-component}}
{{/my-component}}
```

Documentation for supported options is located [here](#options).

### Tooltip on Element

If you want to add a tooltip to an element that is not an Ember component, you can do so with `{{tooltip-on-element}}`.

By default, the tooltip will attach itself to its parent element:

```hbs
<div>
  Hover for more info

  {{#tooltip-on-element}}
    Here is the info in a tooltip!
  {{/tooltip-on-element}}
</div><commit_msg>Documentation added<commit_after>Ember-tooltips (and popovers) [![Build Status](https://travis-ci.org/sir-dunxalot/ember-tooltips.svg)](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)
======

Render tooltips and popovers on components and other HTML elements using HTMLBars.

## Installation

```
ember install ember-tooltips
```

## Documentation

Documentation for usage is below:

- [Demo](http://sir-dunxalot.github.io/ember-tooltips/)
- [1.0.0 Release](#100-release)
- [2.4.0 Release](#240-release)
- [Usage](#usage)
  - [tooltip-on-component](#tooltip-on-component)
  - [tooltip-on-element](#tooltip-on-element)
  - [popover-on-component](#popover-on-element)
  - [popover-on-element](#popover-on-element)
- [Options](#options)
  - [Setting defaults](#setting-defaults)
- [Actions](#actions)
- [Accessibility](#accessibility)

## 1.0.0 Release

Version 1.0.0 removed <a href="http://darsa.in/tooltip/" target="_blank">darsain/tooltip</a> as a dependency, in favor of using custom Ember code.

You 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`.

## 2.4.0 Release

Version 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.

## Usage

### Tooltip on Component

The easiest way to add a tooltip to any component is with the `{{tooltip-on-component}}` component:

```hbs
{{#my-component}}
  Hover for more info

  {{tooltip-on-component 'Here is more info!'}}
{{/my-component}}
```

Or in block form:

```hbs
{{#my-component}}
  Hover for more info

  {{#tooltip-on-component}}
    Here is the info in a tooltip!
  {{/tooltip-on-component}}
{{/my-component}}
```

Options can be set on the `{{tooltip-on-component}}` as attributes:

```hbs
{{#my-component}}
  Click for more info

  {{#tooltip-on-component event='click'}}
    This info will show on click!
  {{/tooltip-on-component}}
{{/my-component}}
```

Documentation for supported options is located [here](#options).

### Tooltip on Element

If you want to add a tooltip to an element that is not an Ember component, you can do so with `{{tooltip-on-element}}`.

By default, the tooltip will attach itself to its parent element:

```hbs
<div>
  Hover for more info

  {{tooltip-on-element text='Here is more info!'}}
</div>
```

Or in block form:

```hbs
<div>
  Hover for more info

  {{#tooltip-on-element}}
    Here is the info in a tooltip!
  {{/tooltip-on-element}}
</div>
{'fraction_non_alphanumeric': 0.15577342047930284, 'fraction_numerical': 0.012345679012345678, 'mean_word_length': 4.307321772639692, 'pattern_counts': {'":': 2, '<': 13, '<?xml version=': 0, '>': 13, 'https://': 10, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1132663', 'n_tokens_mistral': 1927, 'n_tokens_neox': 1812, 'n_words': 534}