Wie man einen Tooltip auf einen Grid-Ui legt Filter auswählen

Question

In ui-Grid weiß jemand, wie man einen Tooltip erstellt, der auf den Optionen eines ausgewählten Filters angezeigt wird? Zum Beispiel in der filter example tutorial, um eine QuickInfo zu zeigen, wenn Sie auf die Optionen "männlich", "weiblich", ... schweben?

Answer 1

Ich denke, Sie müssen nur die Vorlage für Ui-Grid/Ui-Grid-Filter überschreiben, ist in Ordnung.

$templateCache.put('ui-grid/ui-grid-filter', 
    "<div class=\"ui-grid-filter-container\" ng-style=\"col.extraStyle\" ng-repeat=\"colFilter in col.filters\" ng-class=\"{'ui-grid-filter-cancel-button-hidden' : colFilter.disableCancelFilterButton === true }\"><div ng-if=\"colFilter.type !== 'select'\"><input type=\"text\" class=\"ui-grid-filter-input ui-grid-filter-input-{{$index}}\" ng-model=\"colFilter.term\" ng-attr-placeholder=\"{{colFilter.placeholder || ''}}\" aria-label=\"{{colFilter.ariaLabel || aria.defaultFilterLabel}}\"><div role=\"button\" class=\"ui-grid-filter-button\" ng-click=\"removeFilter(colFilter, $index)\" ng-if=\"!colFilter.disableCancelFilterButton\" ng-disabled=\"colFilter.term === undefined || colFilter.term === null || colFilter.term === ''\" ng-show=\"colFilter.term !== undefined && colFilter.term !== null && colFilter.term !== ''\"><i class=\"ui-grid-icon-cancel\" ui-grid-one-bind-aria-label=\"aria.removeFilter\">&nbsp;</i></div></div><div ng-if=\"colFilter.type === 'select'\"><select ng-model=\"colFilter.term\" ng-show=\"colFilter.selectOptions.length > 0\" ng-attr-placeholder=\"{{colFilter.placeholder || aria.defaultFilterLabel}}\" aria-label=\"{{colFilter.ariaLabel || ''}}\" class=\"ui-grid-filter-select ui-grid-filter-input-{{$index}}\"> <option ng-repeat=\"option in colFilter.selectOptions\" value=\"{{ option.value }}\" title=\"{{ option.label }}\">{{ option.label }}</option></select><div role=\"button\" class=\"ui-grid-filter-button-select\" ng-click=\"removeFilter(colFilter, $index)\" ng-if=\"!colFilter.disableCancelFilterButton\" ng-disabled=\"colFilter.term === undefined || colFilter.term === null || colFilter.term === ''\" ng-show=\"colFilter.term !== undefined && colFilter.term != null\"><i class=\"ui-grid-icon-cancel\" ui-grid-one-bind-aria-label=\"aria.removeFilter\">&nbsp;</i></div></div></div>"); 

Demo

http://plnkr.co/edit/5JHQAscKUoaGJW44sfjM?p=preview