Angular-Kendo TreeView - working with div and span templates

Within a Angular-Kendo treeview <div>, I'm having a bit of trouble styling a <div> element which I want to show on a hover event.

Here is an image of the treeview without the icon options to the right of each node:

kendo treeview

However I'd like to show some icons to the right once I hover on a node, as follows :

enter image description here

your advice is appreciated...

Here's the HTML (please notice the Kendo k-template directive used here):

   <div id="treeview" kendo-tree-view             
                k-options="nav.treeOptions"
                k-data-source="nav.reportsTreeDataSource"
                k-on-change="nav.onTreeSelect(dataItem)">



 <span k-template>{{dataItem.text}}
             <span class="templ-icons">               
                <a title="add new folder" ng-click="nav.addAfter(nav.selectedItem)"><i class="fa fa-folder-open"></i></a>&nbsp;
                <a title="add report here" ng-click="nav.addBelow(nav.selectedItem)"><i class="fa fa-plus"></i></a>&nbsp;
                <a title="remove" ng-click="nav.remove(nav.selectedItem)"><i class="fa fa-remove"></i></a> 
             </span>
        </span>

</div>

and of course, I want ONLY want to show the icon options when a user hovers over any particular node (i.e. could be at the folder level, or at the leaf level).

and the CSS :

<style scoped>
.templ-icons {
    text-align: center;
    font-size:smaller;
    font-style: italic;
    color: white;  
}

#treeview:hover > .templ-icons {
    opacity:1.0;
    display:none;
}

What if you make a small directive for this? Check out this example I put together with my toggle-preview directive. I'm not including any kendo controls, but you should be able to add something like this to your custom template. You might need to make some small changes, and you can of course make it more robust, but this seems like a good situation to use something like this, and you can use whichever element you would like be it <span> <div> etc.

JSFiddle Link

<span toggle-preview>item a</span>

.active::after { 
    content: url(~/icon.gif);
}

app.directive('togglePreview', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.on('mouseenter', function() {
                elem.addClass('active');
            });
            elem.on('mouseleave', function() {
                elem.removeClass('active');
            });
        }
    }
}]);

Edit

Per discussion we want to attach all three pre-defined icons, and attach a ng-click handler to the icon with some sort of sense of knowing which icon we clicked. Here is a solution that is driven on a naming convention and utilizing the $compile service for directive injection based on the icon values we provide in the parent attr

Updated JSFiddle

<div toggle-preview ico="plus delete folder" >item a</div>

.add::after {
    content: url(~/iconA.gif);
}

.delete::after { 
    content: url(~/iconB.gif);
}

.folder::after { 
    content: url(~/iconC.gif);
}

app.directive('togglePreview', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {

            var classes = attrs.ico.split(' ');

            elem.on('mouseenter', function(){
                angular.forEach(classes, function(e, i) {

                    var node = $compile('<span ng-click="clickIco($event)"><img src="//~' + e + '.gif" ico="'+ e +'"/><span>')(scope);
                    elem.append(node);
                })
            });
            elem.on('mouseleave', function(){
                elem.children().remove();
            });

            scope.clickIco = function($event){
                console.log($event.target.attributes.ico.value);
            }
        }
    }
}]);