How to add tooltip for each dropdown element?

[chougule-ashwini]

I want to show a tooltip for each drop-down element and that will be dynamic. Can you please help me?

[isteven]

Sorry, by default the directive does not support tooltip.

[pankajparkar]

You can create a directive which name would be multiSelectItem, because isteven-multiselect directive will add multiSelectItem class on each element of dropdown. So As workaround you could create your own directive like below

Note: it should have restricted over C(class) to make it working.

    angular.module('myApp').directive('multiSelectItem', [function(){
        return {
            restrict: 'ACE',
            link: function(scope, element){
                // adding title attribute which would eventually help to show tooltip
                element.attr('title', scope.item.name);
            }
        }
    }])

[ArivananthamA]

We could reuse the existing function. Just use this in the HTML. title="{{writeLabel( item, \'buttonLabel\' )}}"

[mradyuk]

We could reuse the existing function. Just use this in the HTML. title="{{writeLabel( item, 'buttonLabel' )}}"

@ArivananthamA could you please explain this solution? How should writeLabel() work?

here is my element

 <div id="equipment" isteven-multi-select input-model="equipment" output-model="equipmentSelection" button-label="icon name"     item-label="name" tick-property="ticked" orientation="horizontal" selection-mode="single" is-disabled="disableDir"  >
</div>

[ArivananthamA]

Just add the attribut title="{{writeLabel( item, 'buttonLabel' )}}" in your div, will work. There is an existing function written in the library, if passing the type as buttonLabel then it will just return a label. You could see the function writeLabel in isteven-multi-select.js for better understanding.

[mradyuk]

@ArivananthamA thanks, but seems it doesn't make any effect on my div <div id="equipment" isteven-multi-select input-model="equipment" output-model="equipmentSelection" button-label="icon name" item-label="name" tick-property="ticked" orientation="horizontal" selection-mode="single" is-disabled="disableDir" title="{{writeLabel( item, 'buttonLabel' )}}"> </div>

[ArivananthamA]

You should not add there. Should be changed in the hardcoded template section at the isteven-multi-select-4.0.0.js file. '<span '+ 'ng-class="{disabled:itemIsDisabled( item )}" '+ 'title="{{writeLabel( item, \'buttonLabel\' )}}" ' + 'ng-bind-html="writeLabel( item, \'itemLabel\' )">'+ ''+

[mradyuk]

@ArivananthamA thanks for answering, but how element itself should be configured to show my custom tooltips for each item? Seems it shows value as a tooltip

[blzjns]

In isteven-multi-select.js line 593 you can trust each item-label string as html.

e.g.:

<isteven-multi-select 
    output-model="cars"
    item-label="model" />

$scope.cars = [
   { model: `<label title="${car1.year}">${car1.model}</label>`, year: car1.year },
   { model: `<label title="${car2.year}">${car2.model}</label>`, year: car2.year }
];