How to use jquery in an Angularjs directive?

Question

I tried to put a function in jQuery within a directive, but it’s not working. I searched and found in several places talking about jqLite, but I could not convert jQuery to jqLite.

$('[data-toggle="tooltip"]').mouseleave(function () {
    $(this).tooltip('hide')
});

$('[data-toggle="tooltip"]').on("click", function () {
    $(this).tooltip('hide')
});

Answer 1

I use jquery in some Angularjs directives and it works perfectly. Take a look at an example I have here:

app.directive("scrollToTopButton", function () {
    return function (scope, element, attrs) {
        $(element).addClass('scrollToTop');

        $(window).on("scroll", function () {
            if (this.pageYOffset > 300) {
                $(element).fadeIn();
            }
            if (this.pageYOffset <= 0) {
                $(element).fadeOut();
            }
        });

        element.on("click", function () {
            $('html, body').animate({
                scrollTop: 0
            }, 800);

            scope.$apply();
        });
    };
});

Answer 2

angular.module("components").directive("clearTooltip", function () {
  return {
    link: function (scope, element) {
      element.mouseleave(function () {
        $(this).tooltip("hide");
      });

      element.on("click", function () {
        $(this).tooltip("hide");
      });
      element.addClass("teste");
    },
  };
});