Angular: Context Menu Hover in Table
http://angularjs.org/
HTML
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<div ng-controller="MyCtrl">
<br/>
<br/>
<br/>
<div class="container">
<div class="row">
<div class="span2">
<table class="table">
<tr>
<td> <a>Row 1</a>
</td>
<td>
<div show-on-row-hover style="display:none;float:left">
<i tooltip-popup-delay="0"
tooltip-placement="top"
tooltip="Some tooltip textSome tooltip textSome tooltip textSome tooltip textSome tooltip textSome tooltip"
class="icon-info-sign"></i>
</div>
<div show-on-row-hover style="display:none;float:right">
<i class="icon-align-justify"></i>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>
JavaScript
var myApp = angular.module('myApp', ['ui.bootstrap']);
function MyCtrl($scope) {
$scope.name = 'Superhero';
}
myApp.directive('showOnRowHover',
function () {
return {
link: function (scope, element, attrs) {
element.closest('tr').bind('mouseenter', function () {
element.show();
});
element.closest('tr').bind('mouseleave', function () {
element.hide();
var contextmenu = element.find('#contextmenu');
contextmenu.click();
element.parent().removeClass('open');
});
}
};
})