##### Arguments

- _All of the properties listed in the `TwbsTooltip` mixin_.
- `title` - the tooltip String.
- `class` - any additional CSS classes (e.g. `fa fa-clock`)

##### Examples

[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)

#### `{{twbs-span title="Some tooltip value"}}`

Create an `` element whose `title` property will be used to
generate a tooltip.

##### Arguments

- _All of the properties listed in the `TwbsTooltip` mixin_.
- `title` - the tooltip String.

##### Examples

[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)

#### `{{twbs-time datetime="2001-09-11T04:00:00.000Z" title="Some tooltip value"}}`

Create an `` element whose `title` property will be used to
generate a tooltip.

##### Arguments

- _All of the properties listed in the `TwbsTooltip` mixin_.
- _All HTML5 [time](https://www.w3schools.com/TAgs/tag_time.asp) attributes._
- `title` - the tooltip String.

##### Examples

[See the demonstration app for examples](http://ember-cli-bootstrap3-tooltip.cybertooth.io/)

#### `title` Component

When you have a tooltip title that is another rendered component or some sort of dynamic content, use
the nested title component on any one of the above `twbs-*` tags.

Here's an example from the [demo site](http://ember-cli-bootstrap3-tooltip.cybertooth.io/) of a clock
icon with the current time changing in the tooltip:

```hbs
{{#twbs-i class='glyphicon glyphicon-time' placement='right' as |i|}}
{{#i.title}}{{clock.hour}}:{{clock.minute}}:{{clock.second}}{{/i.title}}
{{/twbs-i}}
```

### Mixins

#### `TwbsTooltip`

Check out the [Bootstrap Tooltip Options documentation](http://getbootstrap.com/javascript/#tooltips-options)
as all have been exposed in this mixin, with the following cavaets:

- The boolean options have been renamed to include
a question mark; e.g. `animation` is `animation?` and `html` is
`html?`.
- For conveneince, the `delay` option has been enhanced to accept two
arguments: `delayHide` and `delayShow`.
- `title` is changed to `defaultTitle` because
`title` is already used for the actual tooltip.
- `container` and `trigger` is also renamed to `tooltipContainer`
and `tooltipTrigger` respectively to avoid a naming conflict with
Ember.

##### Properties

- `animation` - Readonly alias to `animation?`.
- `animation?` - Apply a CSS fade transition to the tooltip (`boolean` defaults to `true`)
- `defaultTitle` - Default title value if title attribute isn't present. If a function is given, it will be called with its this reference set to the element that the tooltip is attached to. (`String` defaults to ''; or a function)
- `delayHide` - Delay hiding the tooltip (ms) - does not apply to manual trigger type (`number` defaults to 0)
- `delayShow` - Delay showing the tooltip (ms) - does not apply to manual trigger type (`number` defaults to 0)
- `html` - Readonly alias to `html?`.
- `html?` - Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks. (`boolean` defaults to `false`)
- `placement` - How to position the tooltip: `top` | `bottom` | `left` | `right` | `auto`. When `auto` is specified, it will dynamically reorient the tooltip. For example, if placement is `auto left`, the tooltip will display to the left when possible, otherwise it will display right. When a function is used to determine the placement, it is called with the tooltip DOM node as its first argument and the triggering element DOM node as its second. The this context is set to the tooltip instance. (`String` defaulting to `top`; or a function)
- `selector` - If a selector is provided, tooltip objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have tooltips added. See [this](https://github.com/twbs/bootstrap/issues/4215) and an [informative example](http://jsbin.com/zopod/1/edit). (`String` defaults to `false`)
- `template` - Base HTML to use when creating the tooltip. The tooltip's title will be injected into the `.tooltip-inner`. `.tooltip-arrow` will become the tooltip's arrow. The outermost wrapper element should have the `.tooltip` class. (`String` defaults to `

### Troubleshooting And Tips

1. If you have a title that is dynamic use the nested title component.
1. Make sure the Bootstrap3 CSS and the tooltip Javascript plugin is installed.

## Contributing

See the [Contributing](CONTRIBUTING.md) guide for details.

## License