ng-qtip2 v1.3.3

ng-qtip2

qTip 2 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:
2. Load the ngQtip2 module in your app.js's configuration

Using bower

1. Install with bower

   bower install ng-qtip2

2. Make sure the file is included in your HTML:

   <script type="text/javascript" src="bower_components/ng-qtip2/ng-qtip2.js"></script>

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:

angular.module('myApp', ['ngQtip2']).config(function(qtipDefaultsProvider) {
  qtipDefaultsProvider.setDefaults({
    position: {
      adjust: {
        x: 10,
        y: 20
      }
    }
  });
});

Available options

Interpolated means you can assign expressions inside using {{expression}} format to create dynamic content. Non-interpolated are immediately evaluated as they are. For example, qtip-visible expects a boolean condition expression inside (e.g. qtip-visible="title.length > 0" or qtip-visible="true").

API Object

access the api by adding a scope object to qtip-api

<span qtip="Hi!" qtip-api="tip"></span>

and then access it in your code:

$scope.tip.api().get("position.my")

Because of the way qtip2 works, the api won't 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 {prerender: true} which will force qtip2 to render the qtip on page load.

the qtip-api object has 3 methods:

• isReady()

  Returns true/false because of the way qtip2 works, the api won't be available until you first render it. isReady() will tell you if the api object is ready for use

• api()

  Returns a qtip2 api object for a full documentation about the api object, see: http://qtip2.com/api

• apiPromise()

  Returns a $q promise holding the api object upon resolve example:

  $scope.tip.apiPromise().then(function(api) {
    console.log(api.get("content"));
  });

Examples

1. Regular qTip

<span qtip="Hi there, {{name}}!">{{name}}</span>

2. Immediately visible qTip

<span qtip="Woah!" qtip-visible="true">Keanu</span>

3. qTip from template, with multiple objects

<span qtip qtip-template="my_remote_template.html"
      qtip-template-object="{person: myPerson, callback: myCallback}">
    {{person.name}}
</span>

my_remote_template.html

<span ng-click="object.callback(person)">
    Hi {{object.person.name}}, you are {{object.person.age | pluralize:'year'}} old!
</span>

4. Dynamic qTip position

<ul>
    <li ng-repeat="person in people track by $index"
        qtip="{{$index}}"
        qtip-my="{{getQtipMy($index)}}"
        qtip-at="top {{$index > 15 ? 'center' : 'bottom'}}">
        {{person.name}}
    </li>
</ul>

Contributing

1. Fork this repository
2. Make the desired changes
3. Test your implementations, and that nothing was broken
4. To auto-compile JS from Coffee, copy pre-commit.hook to .git/hooks
5. Commit & Push to your fork (auto-compile should do its magic during commit)
6. Create a pull request