I have a list of trs with nested tds. This is a angular based app. I am also using tooltip.js bootstrap plugin. What I'm trying to achieve is to hide a tooltip from tr when I mouseover on td. My HTML looks like this:
<tr ng-repeat="model in somelist" name="someName" tooltip="someTooltip">
<td tooltip="someOtherTooltip" ng-mouseover="hideTooltip()"></td>
</tr>
and .js like this:
$scope.hideTooltip = function () {
$("[name='someName']").tooltip('hide');
};
Performing DOM manipulations from Controller is a bad practice. You have to do it from directives. In your case, as suggested above, you'd better use ngHide like so:
<tr ng-repeat="model in somelist" name="someName" tooltip="someTooltip">
<td tooltip="someOtherTooltip" ng-hide="tooltipIsHidden" ng-mouseover="hideTooltip()"></td>
</tr>
In your Controller:
$scope.hideTooltip = function () {
$scope.tooltipIsHidden = true;
};
In real world, however, you'd need to pass an argument of the tooltip you want to hide, and use a property like tooltip.isHidden instead.
By the way, you might want to check out UI Bootstrap. It ccntains Bootstrap UI components wrapped in Angular directives (including tooltip) with a lot of useful options.
you can use ngHide. I think its helpful to you cheers!!
My advise is to use UI Bootstrap.
Here is a link on how to use the tooltip functionality: https://angular-ui.github.io/bootstrap/#/tooltip
$(".tooltip").hide();