Writing custom directive to add tooltips to ng-options in AngularJS (TypeScript)

Question

I have some HTML that is currently populating a select box using the ng-options directive. Our problem is that ng-options doesn't support using tooltips. To solve this, I am trying to write a custom directive but I am pretty new to AngularJS and TypeScript, so I'm not sure where to go from where I am.

Here is the relevant code so far:

HTML

<select grid-column-tooltip class="select-box" id="availableColumn" size="5" 
        ng-options="column as column.localizedTitle for column in vm.availableColumns | filter: vm.environmentMatches track by column.field" 
        ng-model="vm.availableColumnElement"
        ng-dblclick="vm.moveToSelectedColumns()">
    <option value="" ng-if="false"></option>
</select>

There is a field on the column object called environmentLabel that I want to display as a tooltip upon hovering.

Javascript

module psfc {
class GirdColumnTooltipDirective implements ng.IDirective {
    restrict = 'A';

    template = '<div class="grid-column-tooltip">{{column.environmentLabel}}</div>';
    constructor(
    ) { }       

    static directive = (): ng.IDirectiveFactory => {
        return () => new GirdColumnTooltipDirective();
    }
}

angular
    .module('psfc')
    .directive('gridColumnTooltip', GirdColumnTooltipDirective.directive());
}

This is obviously very incomplete because I am unsure how to implement what I want in typescript. I am also unsure whether or not to make the template into a div that appears upon hovering, or finding a way to add the title attribute to the relevant option element.

Also, depending on what the solution is, I'm not worried about the CSS for now. I can fix any style problems later.

Answer 1

For simplicity's sake, we ended up just changing the ng-options to use ng-repeat inside the select. Much simpler than writing a custom directive.

HTML

<select class="select-box" id="availableColumn" size="5"
        ng-dblclick="vm.moveToSelectedColumns()">
    <option ng-repeat="column in vm.availableColumns | filter: vm.environmentMatches track by column.field"
            value="column.field"
            ng-click="vm.availableColumnElement = column"
            title="{{column.localizedTitle}}">
         {{column.localizedTitle}}
     </option>
</select>