Question: I'm building a [chartist](http://gionkunz.github.io/chartist-js/) Directive for my AngularJS app. What breaks my understanding at the moment is how I integrate jQuery code the Angular way.

This framework is using jQuery for creating a tooltip. The code is right here:

```
  var $chart = $('.ct-chart');

  var $toolTip = $chart
    .append('<div class="tooltip"></div>')
    .find('.tooltip')
    .hide();

  $chart.on('mouseenter', '.ct-point', function() {
    var $point = $(this);
    var value = $point.attr('ct:value');
    $toolTip.html(value).show();
  });

  $chart.on('mouseleave', '.ct-point', function() {
    $toolTip.hide();
  });

  $chart.on('mousemove', function(event) {
    $toolTip.css({
      left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
      top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
    });
  });

```

My question is: How should I translate this to an AngularJS way of doing things? 

1. I'm getting an element from the DOM
2. Adding a new element to it
3. And then have interactions with this newly added element

> 
> What would be the way Angular is handling those things? Is a 1:1
>  "translation" approbate or should I put ngHide, ngMouseenter inside
>  the view?
> 
> 
>

Answer: 
You could replace `$` with `angular.element` which is the same as `$` of JQuery

& the other problem is before adding any new element to angular DOM it should go through the $compile cycle, Otherwise angular will not register that part of DOM

**Code**

```
  var $chart = $('.ct-chart');

  var $toolTip = $chart
    .append($compile('<div class="tooltip"></div>')(scope))  //compiling newly added element
    .find('.tooltip')
    .hide();

  $chart.on('mouseenter', '.ct-point', function() {
    var $point = $(this);
    var value = $point.attr('ct:value');
    $toolTip.html(value).show();
  });

  $chart.on('mouseleave', '.ct-point', function() {
    $toolTip.hide();
  });

  $chart.on('mousemove', function(event) {
    $toolTip.css({
      left: (event.offsetX || event.originalEvent.layerX) - $toolTip.width() / 2 - 10,
      top: (event.offsetY || event.originalEvent.layerY) - $toolTip.height() - 40
    });
  });

```

All other code looks fine to me.
You can use Jquery style code inside AngularJs.For example getting DOM element, you can use Jquery syntax,but Angular has it's syntax to do that.With angular.element([selector]).It returns you the same thing,which Jquery does.One thing else.If you mousevent functions are not defined as angularjs scope function,you don't have to $compile the template.