https://github.com/chenasraf/ng-qtip2
qTip 2 directive for AngularJS (v1.5)
https://github.com/chenasraf/ng-qtip2
angularjs coffeescript directive javascript qtip
Last synced: 4 months ago
JSON representation
qTip 2 directive for AngularJS (v1.5)
- Host: GitHub
- URL: https://github.com/chenasraf/ng-qtip2
- Owner: chenasraf
- License: apache-2.0
- Created: 2015-07-05T13:02:57.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2017-05-24T09:25:08.000Z (about 9 years ago)
- Last Synced: 2026-02-11T11:16:09.894Z (4 months ago)
- Topics: angularjs, coffeescript, directive, javascript, qtip
- Language: CoffeeScript
- Homepage:
- Size: 62.5 KB
- Stars: 13
- Watchers: 2
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ng-qtip2
qTip 2 wrapper directive for AngularJS.
## Features
* Two way bind support for content and title
* Remote template file support
* Customizable delay, trigger types, position, CSS classes and tip position
## How to use
### Manually include
1. Make sure the file is included in your HTML:
```html
```
2. Load the `ngQtip2` module in your `app.js`'s configuration
```javascript
angular.module('myApp', ['ngQtip2'])
```
### Using bower
1. Install with bower
```sh
bower install ng-qtip2
```
2. Make sure the file is included in your HTML:
```html
```
### Overriding default options
You may override any options for qTip tips globally in your module.
Do this by injecting `qtipDefaultsProvider` inside your app's `config` stage, and using the `setDefaults` method.
Example config stage:
```javascript
angular.module('myApp', ['ngQtip2']).config(function(qtipDefaultsProvider) {
qtipDefaultsProvider.setDefaults({
position: {
my: 'bottom center',
at: 'top center'
}
});
});
```
## Reference
| Option | Type | Default | Description |
|---|---|---|---|
| qtip | string (required) | | The qTip content. This can be left blank and overridden with other properties such as `qtip-content`, `qtip-title`, `qtip-selector`, and `qtip-template`. |
| qtip-content | string | | The qTip content. Overrides `qtip`. |
| qtip-title | string | | When specified, puts the value in qTip's built-in title option. |
| qtip-visible | boolean | false | Whether the qTip is visible immediately. |
| qtip-disable | boolean | false | Whether the qTip is disabled completely. Useful with `ng-repeat` and conditions inside the repeater, for example. |
| qtip-fixed | boolean | true | Whether the qTip sticks around after the mouse leaves it (up until a certain `qtip-delay` is reached |
| qtip-delay | int | 100 | How long to wait before the qTip disappears after it becomes inactive when the `mouseleave` hide event is used (i.e, by default), in ms. |
| qtip-adjust-x | int | 1 | Position the qTip more to the left or right, relatively, in pixels. Use a negative value to move it left. |
| qtip-adjust-y | int | 1 | Position the qTip more to the top or bottom, relatively, in pixels. Use a negative value to move it up. |
| qtip-show-effect | boolean | true | If `false`, will disable animating the showing effect of qTip (this is useful when the dynamic positioning shows a flicker and animates the qTip from the side of the element or screen before positioning it correctly). |
| qtip-hide-effect | boolean | true | If `false`, will disable animating the hiding effect of qTip (this is useful when the dynamic positioning shows a flicker and animates the qTip from the side of the element or screen before positioning it correctly). |
| qtip-modal-style | object | | Set inline style for the qTip. This should be a JS object that contains the JS-esque style properties (such as `{maxHeight: '100vh'}`) |
| qtip-tip-style | object | | Set inline style for the qTip's tip. This should be a JS object that contains the JS-esque style properties (such as `{maxHeight: '100vh'}`), and may also contain tip specific implementations (such as `mimic`, and `corner`). |
| qtip-class | string | | Classes to use for the qTip, you can use these to style the qTip easier with CSS. |
| qtip-selector | string | | CSS selector for element to use. When specified, the element found using the selector and jQuery will override any other content specified. |
| qtip-template | string | | Remote template to use for qTip. When specified, the template will be used for the qTip content and will override any other content specified. Use in conjuction with `qtip-template-object` |
| qtip-template-object | object | | Will assign a model to the qTip template for use inside the template's content. You can reference this using `{{object}}` inside the template. |
| qtip-event | string | mouseover | What event triggers the qTip to show up. |
| qtip-event-out | string | mouseout | What event triggers the qTip to hide after being shown. |
| qtip-show | object | | Object for the qtip 'show' option (see qTip docs). Will override `qtip-event` |
| qtip-hide | object | | Object for the qtip 'hide' option (see qTip docs). Will override `qtip-event-out` |
| qtip-my | string | bottom center | qTip bubble tip position relative to the qTip. "Put **my** tip **at** the qTip's..." |
| qtip-at | string | top center | qTip bubble tip position relative to the qTip. "Put **my** tip **at** the qTip's..." |
| qtip-persistent | boolean | true | If `false`, qTip will be re-rendered next time it is open. |
| qtip-options | object | | Object for the entire qtip initializer. This will merge itself into the other options specified in this table, overriding any existing keys. This is to explicitly override any options that are not handled the way you expect within these options, or to use options that are not yet implemented. |
| qtip-api | object | | An empty object to hold the API reference object. [See reference below](#api-object) |
### API Object
Access the api by adding a scope object to `qtip-api`:
```html
```
And then access it in your code:
```js
$scope.tip.api().get("position.my")
```
Because of the way qtip2 works, *the API will not be available until you first render it*.
This means that it won't be ready until the user showed it (hovered on the associated directive), or you've passed to the options `qtip-options="{prerender: true}"` which will force qtip2 to render the qtip on page load.
#### ngQtip API methods
| Name | Description | Returns |
|---|---|---|
| isReady( | Returns true if the API object is ready for use, false otherwise | boolean |
| api( | Returns a qTip2 API object. [See official documentation][qtip-docs]. | object |
| apiPromise( | Returns a `$q` promise holding the api object upon resolve. [See example below](#5-api-promise | object |
## Examples
#### 1. Regular qTip
```html
{{name}}
```
#### 2. Immediately visible qTip
```html
Keanu
```
#### 3. qTip from template, with multiple objects
```html
{{person.name}}
```
##### my_remote_template.html
```html
Hi {{object.person.name}}, you are {{object.person.age | pluralize:'year'}} old!
```
#### 4. Dynamic qTip position
```html
-
{{person.name}}
```
#### 5. API Promise
```js
$scope.tip.apiPromise().then(function(api) {
console.log(api.get("content"));
});
```
## Contributing
1. Fork this repository
1. Make the desired changes
1. Test your implementations, and that nothing was broken
1. To auto-compile JS from Coffee, copy `pre-commit.hook` to `.git/hooks`
1. Commit & Push to your fork (auto-compile should do its magic during commit)
1. Create a pull request
[qtip-docs]: http://qtip2.com/api