Phan Sinh Phan Sinh - 1 year ago 75
Javascript Question

how do display tooltip when move mouse to for each item in editable-select

I'm trying display tooltip when move mouse into each item in editable-select.

<a href="#" editable-select="user.status" e-multiple e-ng-options="s.value as s.text for s in statuses">
click me

When I click on the link "click me", the editable select preview. I want display tooltip when I move mouse to each item in editable select. I'm tried search on the internet but could not find I need. So, who can any ideal for my question? Please help me... thanks so much.

Answer Source

Author want to see that:

enter image description here

If I understand correctly, the library (that use author) doesn't have directive-option for. So, I write directive with code below (jsfiddle here):

.directive('eTooltip', function($interval) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var key = attrs.eTooltip;
            var field = attrs.eTooltipField;

            function addTitles() {
                var options ='option');
                do {
                     if (scope.$eval(key)) {
                } while(scope = scope.$parent);


                var myList = scope.$eval(key);
                for(var i=0; i<options.length; i++) {
                    if(!myList[i]) {
                    options[i].setAttribute('title', myList[i][field]);

            function check() {
                var classes = element[0].classList;
                for(var i=0; i<classes.length; i++)
                    if(classes[i] == 'editable-hide')
                        return addTitles();

            $interval(check, 1000);

Angular Bootstrap has a tooltips. But it's a large library. Of course, exists other, little library. And you may to write your own module, but it takes time. =)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download